Add navigation with routing

The Tour of Heroes application has new requirements:

• Add a Dashboard view

• Add the ability to navigate between the Heroes and Dashboard

views

• When users click a hero name in either view, navigate to a detail

view of the selected hero

• When users click a deep link in an email, open the detail view for a
particular hero

For the sample application that this page describes, see the

live example / download example.

When you're done, users can navigate the application like this:
Add the
In Angular, the best practice is to load and con�gure the router in a

separate, top-level module. The router is dedicated to routing and

imported by the root AppModule .

By convention, the module class name is AppRoutingModule and it

belongs in the app-routing.module.ts in the src∕app directory.

Run ng generate to create the application routing module.

ng generate app-routing --flat -- =app

PARAMETER DETAILS

--flat Puts the file in src∕app instead of its own

directory.

--module=app Tells ng generate to register it in the

imports array of the AppModule .

The �le that ng generate creates looks like this:

 src/app/app-routing.module.ts (generated)

{ } '@angular∕core';

{ } '@angular∕common';

@NgModule({
imports: [

],
declarations: []
})
{ }

Replace it with the following:

src/app/app-routing.module.ts (updated)

{ } '@angular∕core';

{ , }
'@angular∕router';
{ } '.∕heroes
∕heroes.component';

routes: = [
{ path: 'heroes', component: }
];

@NgModule({
imports: [ .forRoot(routes)],
exports: [ ]
})
{ }

First, the app-routing.module.ts �le imports RouterModule and

Routes so the application can have routing capability. The next import,

HeroesComponent , gives the Router somewhere to go once you

con�gure the routes.

Notice that the CommonModule references and declarations array

are unnecessary, so are no longer part of AppRoutingModule . The

following sections explain the rest of the AppRoutingModule in more

detail.

Routes
The next part of the �le is where you con�gure your routes. Routes tell

the Router which view to display when a user clicks a link or pastes a

URL into the browser address bar.

Since app-routing.module.ts already imports HeroesComponent ,

you can use it in the routes array:

src/app/app-routing.module.ts

routes: = [
{ path: 'heroes', component: }
];

A typical Angular Route has two properties:

PROPERTIES DETAILS

path A string that matches the URL in the browser

address bar.

component The component that the router should create

when navigating to this route.

This tells the router to match that URL to path: 'heroes' and display

the HeroesComponent when the URL is something like

localhost:4200∕heroes .
The @NgModule metadata initializes the router and starts it listening for

browser location changes.

The following line adds the RouterModule to the AppRoutingModule

imports array and con�gures it with the routes in one step by calling

RouterModule.forRoot() :

src/app/app-routing.module.ts

imports: [ .forRoot(routes) ],

The method is called forRoot() because you con�gure the

router at the application's root level. The forRoot() method

supplies the service providers and directives needed for

routing, and performs the initial navigation based on the

current browser URL.

Next, AppRoutingModule exports RouterModule to be available

throughout the application.

src/app/app-routing.module.ts (exports array)

exports: [ ]

Add
Open the AppComponent template and replace the <app-heroes>

element with a <router-outlet> element.

 src/app/app.component.html (router-outlet)

{{title}}

The AppComponent template no longer needs <app-heroes> because

the application only displays the HeroesComponent when the user

navigates to it.

The <router-outlet> tells the router where to display routed views.

The RouterOutlet is one of the router directives that

became available to the AppComponent because AppModule

imports AppRoutingModule which exported RouterModule .

The ng generate command you ran at the start of this

tutorial added this import because of the --module=app �ag.

If you didn't use the ng generate command to create app-

routing.module.ts , import AppRoutingModule into

app.module.ts and add it to the imports array of the

NgModule .

Try it

If you're not still serving your application, run ng serve to see your

application in the browser.

The browser should refresh and display the application title but not the

list of heroes.

Look at the browser's address bar. The URL ends in ∕ . The route path

to HeroesComponent is ∕heroes .

Append ∕heroes to the URL in the browser address bar. You should
see the familiar heroes overview/detail view.

Remove ∕heroes from the URL in the browser address bar. The

browser should refresh and display the application title but not the list of

heroes.

Add a navigation link using

Ideally, users should be able to click a link to navigate rather than

pasting a route URL into the address bar.

Add a <nav> element and, within that, an anchor element that, when

clicked, triggers navigation to the HeroesComponent . The revised

AppComponent template looks like this:

src/app/app.component.html (heroes RouterLink)

{{title}}

routerLink="∕heroes" Heroes

A routerLink attribute is set to "∕heroes" , the string that the router

matches to the route to HeroesComponent . The routerLink is the

selector for the RouterLink directive that turns user clicks into router

navigations. It's another of the public directives in the RouterModule .

The browser refreshes and displays the application title and heroes link,

but not the heroes list.

Click the link. The address bar updates to ∕heroes and the list of
heroes appears.

Make this and future navigation links look better by adding

private CSS styles to app.component.css as listed in the

�nal code review below.