From 756457ebc2f80a4a5b8dc01fae7d5d86282d0fc6 Mon Sep 17 00:00:00 2001 From: Nikolay Iliev Date: Fri, 20 Jul 2018 11:26:54 +0300 Subject: [PATCH] docs: add a note about router-outlet specifics --- docs/core-concepts/angular-navigation.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/core-concepts/angular-navigation.md b/docs/core-concepts/angular-navigation.md index ddda4a566..e65fee0ce 100644 --- a/docs/core-concepts/angular-navigation.md +++ b/docs/core-concepts/angular-navigation.md @@ -56,6 +56,7 @@ One thing you might have noticed in the code above is the `nsRouterLink` directi ## Router Outlet +The `router-outlet` acts as a placeholder that Angular dynamically fills based on the current router state. Let's take a look at the following example that uses ``: {%snippet router-outlet-example%} @@ -65,6 +66,13 @@ The result is that with each navigation the content of the `router-outlet` is re ![router-outlet-ios](../img/navigation-angular/outlet-ios.gif "RouterOutlet IOS") ![router-outlet-Android](../img/navigation-angular/outlet-android.gif "RouterOutlet Android") +> **Note:** In the context of NativeScript the `router-outlet` placeholder always needs to be wrapped in a native layout and can't be the root level element. For example: +```HTML + + + +``` + ## Page Router Outlet Here is a similar example using the `page-router-outlet`: