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!' 
}) 
export class ArticleComponent {} 

Next, install an article route accompanied by this new component:

[app/app.module.ts] 
 
import {NgModule} from '@angular/core'; 
import {BrowserModule...