An example of how child routes and nested
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.
In the text below, when you see a word or phrase, 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.
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.
Let's remind ourselves of the main menu which features in the first router example.
Note: to learn more about the
<router-outlet> shown in this code snippet, see this
Angular 2 router example.
This time the rendered view contains a
At this point the child path is appended to the primary path to produce a URL hash value such as
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
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.
Each parent path (e.g.
has its own set of route definitions. These associate a component with the
#/blue/light will use
BlueComponent to render a view
in the outer
to render the view in the inner
The source code for this tutorial is available in the angular-2-router GitHub repo.