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...

Angular Child Routing

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

Found in this file:

app.component.html

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>

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:

    <app-bar-chart></app-bar-chart>

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.

  <app-root>
   <app-test>
     <app-test1></app-test1>
     <app-test2></app-test2>
   </app-test>
   </app-root>

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

This route handles this case:

localhost:4200/test

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

   path:'test', component:testcomponent,
   children:[
     {
       path:'test1', component:test1component
     },
     {
       path:'test2', component:test2component
     }
   ]

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

localhost:4200/test/test1
localhost:4200/test/test2

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.

JWP2020