DEV Community

John Peters
John Peters

Posted on • Updated on

Angular Child Routing

Angular's documentation on Routing seems to require a master's degree to get through the whole thing. Blurred vision, random thoughts, repeated readings, and a real implementation of Too Long, Didn't Read are all symptoms of diving in to Angular Routing, but...

Alt Text

Angular Child Routing

A newly created Angular application has just one router-outlet.

Alt Text

Found in this file:

Enter fullscreen mode Exit fullscreen mode

We know from the documentation that this is a placeholder for Angular to know where to render injected content. But what is injected content? One type of injected content is found in HTML using a routerLink directive. Notice that a path is being spelled out named bar-chart.

  <a class="nav-link" routerLink="/bar-chart">Bar Chart</a>
Enter fullscreen mode Exit fullscreen mode

When this link is clicked the content of /bar-chart is rendered in the router-outlet placeholder. This is also true for our custom components. Such as:

Enter fullscreen mode Exit fullscreen mode

So far, so good for root level injection of any component. But what if we want to inject content into other paths not in the root? For example a component named test has two other components it wants to display from it's page.

Enter fullscreen mode Exit fullscreen mode

We don't want app-root or app-test to refresh when we are on app-test, and click a routerlink to test1 or test2. We can do this by configuring a router-outlet in app-test, and setting up children routes in our app-router.ts file.

Step 1) Place a router-outlet tag in app-test.html file.
Step 2) Go to app.router.ts and add a router to app-test like this

   path:'test', compoent:testcomponent
Enter fullscreen mode Exit fullscreen mode

This route handles this case:

Enter fullscreen mode Exit fullscreen mode

Step 3) Add Children Routes to the 'test' route.

   path:'test', component:testcomponent,
       path:'test1', component:test1component
       path:'test2', component:test2component
Enter fullscreen mode Exit fullscreen mode

Because the testcomponent has a router-outlet, when ever these urls are seen:


Enter fullscreen mode Exit fullscreen mode

The content of test1 and test2 are rendered within the testcomponent's router-outlet, this means that the app-root and the app-test components are not re-rendered!

Take Away:
Routes that are configured with Children are referring to the URL style. A child route is based on the parent route that contains it. This simply means that as shown above when the route itself has a test1, or test2 (for this example) those child routes are rended in the parent testComponent route and not the appRootComponent.


Top comments (0)