Navigating with the Router service

The companion to using routerLink inside the template to navigate is doing it from inside JavaScript. Angular exposes the navigate() method from inside a service, which allows you to accomplish exactly this.

Note

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

Getting ready

Begin with the application that exists at the end of the How to do it... section of the Navigating with routerLinks recipe.

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

How to do it...

Instead of using routerLink, which is the most sensible choice in this situation, you can also trigger a navigation using the Router service. First, add nav buttons and attach some empty click handlers to them:

[app/root.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'root', 
  template...