Implementing nested views with route parameters and child routes

Angular 2's component router offers you the necessary concept of child routes. As you might expect, this brings the concept of recursively defined views to the table, which affords you an incredibly useful and elegant way of building your application.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/7892/.

Getting ready

Begin with the Array and anchor-tag-based implementation shown in Navigating with routerLinks recipe.

Your goal is to extend this simple application to include /article, which will be the list view, and /article/:id, which will be the detail view.

How to do it...

First, modify the route structure for this simple application by extending the /article path to include its subpaths: / and /:id. Routes are defined hierarchically, and each route can have child routes using the children property.

Adding a routing target to the parent component

First, you must modify the existing...