Angular 2 Child Routes - Loading..
Style: Blog or IDE

Angular 2 Child Routes

An example of how child routes and nested <router-outlet> directives allow navigation between multiple views when a user clicks a link in a sub-menu.

This tutorial builds on a simple router example and assumes that you have read this tutorial first.

Quick Tip

In the text below, when you see a word or phrase with this color, click on it to highlight the source code.

Also, take a look at the IDE style to see this tutorial in wide-screen mode. You can always switch back using the Style link at the top of the page.

Show me the IDE style

The Application

This application shows how child routes work with a submenu. The parent menu manages the outer colored box and the child menu controls the inner, darker shaded box. It's a working application so feel free to give it a try.


Main Menu

Let's remind ourselves of the main menu which features in the first router example.

The routerLink directives tells the Angular router which path to use, and the appropriate component is used to render a view in the <router-outlet>.

app.component.ts x

Note: to learn more about the routerLink, routerLinkActive and <router-outlet> shown in this code snippet, see this Angular 2 router example.

Child Menu

This time the rendered view contains a sub-menu and an additional <router-outlet> directive. When the user clicks a link, a new component is used to render the view here.

At this point the child path is appended to the primary path to produce a URL hash value such as #/green/dark or #/red/medium. You can see this by running the app and watching the browser URL.

There are different ways to set the child route (we demonstrate a few of them here but usually we would be more consistent and just pick one style). We can simply use the child route path and it will be added to the parent route, we can include the parent in an absolute path, or we can specify a relative path using ./ or ../

We now have two levels of menu which control different regions of the page. Next we'll configure the router to handle these nested routes.

blue.component.ts x

Child Routes

Each parent path (e.g. /red, /green, /blue) has its own set of route definitions. These associate a component with the parent path, and a set of components with the child paths.

So #/blue/light will use BlueComponent to render a view in the outer <router-outlet>, and LightBlueComponent to render the view in the inner <router-outlet>.

blue.routes.ts x

Main Routes

These child routes are then added to the main router definition using the JavaScript spread operator. It isn't strictly necessary to split the routes up like this; we could just include the child route definitions directly in this file. However, this technique allows us to group the routes with a particular feature.

app.routes.ts x

Where Next?

Source Code

The source code for this tutorial is available in the angular-2-router GitHub repo.