Navigating with routerLinks

Navigating around a single page application is a fundamental task, and Angular offers you a built-in directive, routerLink, to accomplish this.

Note

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

Getting ready

Begin with the application setup assembled in the Setting up an application to support simple routes recipe.

Your goal is to add an additional route to this application accompanied by a component; also, you want to be able to navigate between them using links.

How to do it...

To begin, create another component, ArticleComponent, and an associated route:

[app/article/article.component.ts] import {Component} from '@angular/core'; @Component({ template: 'Article component!' ...

Get Angular 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.