Routing Around the App
We received new requirements for our Tour of Heroes application:
- Add a Dashboard view.
- Navigate between the Heroes and Dashboard views.
- Clicking on a hero in either view navigates to a detail view of the selected hero.
- Clicking a deep link in an email opens the detail view for a particular hero.
When we’re done, users will be able to navigate the app like this:
We'll add Angular’s Component Router to our app to satisfy these requirements.
The Routing and Navigation chapter covers the router in more detail than we will in this tutorial.
Run the live example for this part.
To see the URL changes in the browser address bar, pop out the preview window by clicking the blue 'X' button in the upper right corner:
Where We Left Off
Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service and hero detail component. If not, we’ll need to go back and follow the previous chapters.
Keep the app transpiling and running
Open a terminal/console window and enter the following command to start the TypeScript compiler, start the server, and watch for changes:
npm start
The application runs and updates automatically as we continue to build the Tour of Heroes.
Action plan
Here's our plan:
- Turn
AppComponent
into an application shell that only handles navigation - Relocate the Heroes concerns within the current
AppComponent
to a separateHeroesComponent
- Add routing
- Create a new
DashboardComponent
- Tie the Dashboard into the navigation structure
Routing is another name for navigation. The router is the mechanism for navigating from view to view.
Splitting the AppComponent
Our current app loads AppComponent
and immediately displays the list of heroes.
Our revised app should present a shell with a choice of views (Dashboard and Heroes) and then default to one of them.
The AppComponent
should only handle navigation. Let's move the display of Heroes out of AppComponent
and into its own HeroesComponent
.
HeroesComponent
AppComponent
is already dedicated to Heroes. Instead of moving anything out of AppComponent
, we'll just rename it HeroesComponent
and create a new AppComponent
shell separately.
The steps are to rename:
- app.component.ts file to heroes.component.ts
-
AppComponent
class toHeroesComponent
- Selector
my-app
tomy-heroes
app/heroes.component.ts (showing renamings only)
@Component({ selector: 'my-heroes', }) export class HeroesComponent implements OnInit { }
Create AppComponent
The new AppComponent
will be the application shell. It will have some navigation links at the top and a display area below for the pages we navigate to.
The initial steps are:
- Create the file app/app.component.ts.
- Define an exported
AppComponent
class. - Add an
@Component
decorator above the class with amy-app
selector. - Move the following from
HeroesComponent
toAppComponent
:-
title
class property -
@Component
template<h1>
element, which contains a binding totitle
-
- Add a
<my-heroes>
element to the app template just below the heading so we still see the heroes. - Add
HeroesComponent
to thedeclarations
array ofAppModule
so Angular recognizes the<my-heroes>
tags. - Add
HeroService
to theproviders
array ofAppModule
because we'll need it in every other view. - Remove
HeroService
from theHeroesComponent
providers
array since it has been promoted. - Add the supporting
import
statements forAppComponent
.
Our first draft looks like this:
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <my-heroes></my-heroes> ` }) export class AppComponent { title = 'Tour of Heroes'; }
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { HeroDetailComponent } from './hero-detail.component'; import { HeroesComponent } from './heroes.component'; import { HeroService } from './hero.service'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, HeroDetailComponent, HeroesComponent ], providers: [ HeroService ], bootstrap: [ AppComponent ] }) export class AppModule { }
The app still runs and still displays heroes. Our refactoring of AppComponent
into a new AppComponent
and a HeroesComponent
worked! We have done no harm.
Add Routing
We're ready to take the next step. Instead of displaying heroes automatically, we'd like to show them after the user clicks a button. In other words, we'd like to navigate to the list of heroes.
We'll need the Angular Component Router.
The Angular router is an external, optional Angular NgModule called RouterModule
. The router is a combination of multiple provided services (RouterModule
), multiple directives (RouterOutlet, RouterLink, RouterLinkActive
), and a configuration (Routes
). We'll configure our routes first.
Add the base tag
Open index.html
and add <base href="/">
at the top of the <head>
section.
index.html (base-href)
<head> <base href="/">
See the base href section of the Router chapter to learn why this matters.
Configure routes
Our application doesn't have any routes yet. We'll start by creating a configuration file for the application routes.
Routes tell the router which views to display when a user clicks a link or pastes a URL into the browser address bar.
Let's define our first route as a route to the heroes component:
app/app.routing.ts (heroes route)
import { ModuleWithProviders } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HeroesComponent } from './heroes.component'; const appRoutes: Routes = [ { path: 'heroes', component: HeroesComponent } ];
The Routes
are an array of route definitions. We have only one route definition at the moment but rest assured, we'll add more.
This route definition has the following parts:
-
path: the router matches this route's path to the URL in the browser address bar (
heroes
). - name: the official name of the route; it must begin with a capital letter to avoid confusion with the path (
Heroes
). -
component: the component that the router should create when navigating to this route (
HeroesComponent
).
Learn more about defining routes with Routes
in the Routing chapter.
We'll export a routing
constant initialized using the RouterModule.forRoot
method applied to our array of routes. This method returns a configured router module that we'll add to our root NgModule, AppModule
.
app/app.routing.ts (excerpt)
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
We call the forRoot
method because we're providing a configured router at the root of the application. The forRoot
method gives us the Router service providers and directives needed for routing.
Make the router available
We've setup initial routes in the app.routing.ts
file. Now we'll add it to our root NgModule.
Import the routing
constant from app.routing.ts
and add it the imports
array of AppModule
.
app/app.module.ts (routing)
import { routing } from './app.routing'; @NgModule({ imports: [ BrowserModule, FormsModule, routing ], }) export class AppModule { }
Router Outlet
If we paste the path, /heroes
, into the browser address bar, the router should match it to the heroes
route and display the HeroesComponent
. But where?
We have to tell it where by adding a <router-outlet>
element to the bottom of the template. RouterOutlet
is one of the directives provided by the RouterModule
. The router displays each component immediately below the <router-outlet>
as we navigate through the application.
Router Links
We don't really expect users to paste a route URL into the address bar. We add an anchor tag to the template which, when clicked, triggers navigation to the HeroesComponent
.
The revised template looks like this:
app/app.component.ts (template-v2)
template: ` <h1>{{title}}</h1> <a routerLink="/heroes">Heroes</a> <router-outlet></router-outlet> `
Notice the routerLink
binding in the anchor tag. We bind the RouterLink
directive (another of the RouterModule
directives) to a string that tells the router where to navigate when the user clicks the link.
Since our link is not dynamic, we define a routing instruction with a one-time binding to our route path. Looking back at the route configuration, we confirm that '/heroes'
is the path of the route to the HeroesComponent
.
Learn more about dynamic router links and the link parameters array in the Routing chapter.
Refresh the browser. We see only the app title and heroes link. We don't see the heroes list.
The browser's address bar shows /
. The route path to HeroesComponent
is /heroes
, not /
. We don't have a route that matches the path /
, so there is nothing to show. That's something we'll want to fix.
We click the Heroes navigation link, the browser bar updates to /heroes
, and now we see the list of heroes. We are navigating at last!
At this stage, our AppComponent
looks like this.
app/app.component.ts (v2)
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <a routerLink="/heroes">Heroes</a> <router-outlet></router-outlet> ` }) export class AppComponent { title = 'Tour of Heroes'; }
The AppComponent is now attached to a router and displaying routed views. For this reason and to distinguish it from other kinds of components, we call this type of component a Router Component.
Add a Dashboard
Routing only makes sense when we have multiple views. We need another view.
Create a placeholder DashboardComponent
that gives us something to navigate to and from.
app/dashboard.component.ts (v1)
import { Component } from '@angular/core'; @Component({ selector: 'my-dashboard', template: '<h3>My Dashboard</h3>' }) export class DashboardComponent { }
We’ll come back and make it more useful later.
Configure the dashboard route
Go back to app.routing.ts
and teach it to navigate to the dashboard.
Import the dashboard component and add the following route definition to the Routes
array of definitions.
app/app.routing.ts (Dashboard route)
{ path: 'dashboard', component: DashboardComponent },
Also import and add DashboardComponent
to our root NgModule's declarations
.
app/app.module.ts (dashboard)
declarations: [ AppComponent, DashboardComponent, HeroDetailComponent, HeroesComponent ],
redirectTo
We want the app to show the dashboard when it starts and we want to see a nice URL in the browser address bar that says /dashboard
. Remember that the browser launches with /
in the address bar.
We can use a redirect route to make this happen. Add the following to our array of route definitions:
app/app.routing.ts (redirect)
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
Learn about the redirects in the Routing chapter.
Add navigation to the template
Finally, add a dashboard navigation link to the template, just above the Heroes link.
app/app.component.ts (template-v3)
template: ` <h1>{{title}}</h1> <nav> <a routerLink="/dashboard">Dashboard</a> <a routerLink="/heroes">Heroes</a> </nav> <router-outlet></router-outlet> `
We nestled the two links within <nav>
tags. They don't do anything yet but they'll be convenient when we style the links a little later in the chapter.
To see these changes in your browser, go to the application root (/
) and reload. The app displays the dashboard and we can navigate between the dashboard and the heroes.
Dashboard Top Heroes
Let’s spice up the dashboard by displaying the top four heroes at a glance.
Replace the template
metadata with a templateUrl
property that points to a new template file.
app/dashboard.component.ts (templateUrl)
templateUrl: 'app/dashboard.component.html',
We specify the path all the way back to the application root — app/
in this case — because Angular doesn't support relative paths by default. We can switch to component-relative paths if we prefer.
Create that file with this content:
app/dashboard.component.html (excerpt)
<h3>Top Heroes</h3> <div class="grid grid-pad"> <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4"> <div class="module hero"> <h4>{{hero.name}}</h4> </div> </div> </div>
We use *ngFor
once again to iterate over a list of heroes and display their names. We added extra <div>
elements to help with styling later in this chapter.
There's a (click)
binding to a gotoDetail
method we haven't written yet and we're displaying a list of heroes that we don't have. We have work to do, starting with those heroes.
Share the HeroService
We'd like to re-use the HeroService
to populate the component's heroes
array.
Recall earlier in the chapter that we removed the HeroService
from the providers
array of HeroesComponent
and added it to the providers
array of AppModule
.
That move created a singleton HeroService
instance, available to all components of the application. Angular will inject HeroService
and we'll use it here in the DashboardComponent
.
Get heroes
Open dashboard.component.ts and add the requisite import
statements.
app/dashboard.component.ts (imports)
import { Component, OnInit } from '@angular/core'; import { Hero } from './hero'; import { HeroService } from './hero.service';
Now implement the DashboardComponent
class like this:
app/dashboard.component.ts (class)
export class DashboardComponent implements OnInit { heroes: Hero[] = []; constructor(private heroService: HeroService) { } ngOnInit(): void { this.heroService.getHeroes() .then(heroes => this.heroes = heroes.slice(1, 5)); } gotoDetail(hero: Hero): void { /* not implemented yet */} }
We've seen this kind of logic before in the HeroesComponent
:
- Define a
heroes
array property. - Inject the
HeroService
in the constructor and hold it in a privateheroService
field. - Call the service to get heroes inside the Angular
ngOnInit
lifecycle hook.
The noteworthy differences: we cherry-pick four heroes (2nd, 3rd, 4th, and 5th) and stub the gotoDetail
method until we're ready to implement it.
Refresh the browser and see four heroes in the new dashboard.
Navigate to Hero Details
Although we display the details of a selected hero at the bottom of the HeroesComponent
, we don't yet navigate to the HeroDetailComponent
in the three ways specified in our requirements:
- from the Dashboard to a selected hero.
- from the Heroes list to a selected hero.
- from a "deep link" URL pasted into the browser address bar.
Adding a hero-detail route seems like an obvious place to start.
Routing to a hero detail
We'll add a route to the HeroDetailComponent
in app.routing.ts
where our other routes are configured.
The new route is a bit unusual in that we must tell the HeroDetailComponent
which hero to show. We didn't have to tell the HeroesComponent
or the DashboardComponent
anything.
At the moment the parent HeroesComponent
sets the component's hero
property to a hero object with a binding like this.
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
That clearly won't work in any of our routing scenarios. Certainly not the last one; we can't embed an entire hero object in the URL! Nor would we want to.
Parameterized route
We can add the hero's id
to the URL. When routing to the hero whose id
is 11, we could expect to see an URL such as this:
/detail/11
The /detail/
part of that URL is constant. The trailing numeric id
part changes from hero to hero. We need to represent that variable part of the route with a parameter (or token) that stands for the hero's id
.
Configure a Route with a Parameter
Here's the route definition we'll use.
app/app.routing.ts (hero detail)
{ path: 'detail/:id', component: HeroDetailComponent },
The colon (:) in the path indicates that :id
is a placeholder to be filled with a specific hero id
when navigating to the HeroDetailComponent
.
We're finished with the application routes.
We won't add a 'Hero Detail'
link to the template because users don't click a navigation link to view a particular hero. They click a hero whether that hero is displayed on the dashboard or in the heroes list.
We'll get to those hero clicks later in the chapter. There's no point in working on them until the HeroDetailComponent
is ready to be navigated to.
That will require an HeroDetailComponent
overhaul.
Revise the HeroDetailComponent
Before we rewrite the HeroDetailComponent
, let's review what it looks like now:
app/hero-detail.component.ts (current)
import { Component, Input } from '@angular/core'; import { Hero } from './hero'; @Component({ selector: 'my-hero-detail', template: ` <div *ngIf="hero"> <h2>{{hero.name}} details!</h2> <div> <label>id: </label>{{hero.id}} </div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"/> </div> </div> ` }) export class HeroDetailComponent { @Input() hero: Hero; }
The template won't change. We'll display a hero the same way. The big changes are driven by how we get the hero.
We will no longer receive the hero in a parent component property binding. The new HeroDetailComponent
should take the id
parameter from the params
observable in the ActivatedRoute
service and use the HeroService
to fetch the hero with that id
.
First, add the requisite imports:
// Keep the Input import for now, we'll remove it later: import { Component, Input, OnInit } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; import { HeroService } from './hero.service';
Let's have the ActivatedRoute
service and the HeroService
injected into the constructor, saving their values in private fields:
app/hero-detail.component.ts (constructor)
constructor( private heroService: HeroService, private route: ActivatedRoute) { }
We tell the class that we want to implement the OnInit
interface.
export class HeroDetailComponent implements OnInit {
Inside the ngOnInit
lifecycle hook, we use the params
observable to extract the id
parameter value from the ActivateRoute
service and use the HeroService
to fetch the hero with that id
.
app/hero-detail.component.ts (ngOnInit)
ngOnInit(): void { this.route.params.forEach((params: Params) => { let id = +params['id']; this.heroService.getHero(id) .then(hero => this.hero = hero); }); }
Notice how we extract the id
by calling the forEach
method which will deliver our array of route parameters.
The hero id
is a number. Route parameters are always strings. So we convert the route parameter value to a number with the JavaScript (+) operator.
Add HeroService.getHero
The problem with this bit of code is that HeroService
doesn't have a getHero
method! We better fix that quickly before someone notices that we broke the app.
Open HeroService
and add a getHero
method that filters the heroes list from getHeroes
by id
:
app/hero.service.ts (getHero)
getHero(id: number): Promise<Hero> { return this.getHeroes() .then(heroes => heroes.find(hero => hero.id === id)); }
Let's return to the HeroDetailComponent
to clean up loose ends.
Find our way back
We can navigate to the HeroDetailComponent
in several ways. How do we navigate somewhere else when we're done?
The user could click one of the two links in the AppComponent
. Or click the browser's back button. We'll add a third option, a goBack
method that navigates backward one step in the browser's history stack.
app/hero-detail.component.ts (goBack)
goBack(): void { window.history.back(); }
Going back too far could take us out of the application. That's acceptable in a demo. We'd guard against it in a real application, perhaps with the CanDeactivate guard.
Then we wire this method with an event binding to a Back button that we add to the bottom of the component template.
<button (click)="goBack()">Back</button>
Modifing the template to add this button spurs us to take one more incremental improvement and migrate the template to its own file, called hero-detail.component.html:
app/hero-detail.component.html
<div *ngIf="hero"> <h2>{{hero.name}} details!</h2> <div> <label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name" /> </div> <button (click)="goBack()">Back</button> </div>
We update the component metadata with a templateUrl
pointing to the template file that we just created.
app/hero-detail.component.ts (templateUrl)
templateUrl: 'app/hero-detail.component.html',
Refresh the browser and see the results.
Select a Dashboard Hero
When a user selects a hero in the dashboard, the app should navigate to the HeroDetailComponent
to view and edit the selected hero.
In the dashboard template we bound each hero's click event to the gotoDetail
method, passing along the selected hero
entity.
app/dashboard.component.html (click)
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
We stubbed the gotoDetail
method when we rewrote the DashboardComponent
. Now we give it a real implementation.
app/dashboard.component.ts (gotoDetail)
gotoDetail(hero: Hero): void { let link = ['/detail', hero.id]; this.router.navigate(link); }
The gotoDetail
method navigates in two steps:
- Set a route link parameters array
- Pass the array to the router's navigate method
For navigation, we wrote router links as link parameters arrays in the AppComponent
template. Those link parameters arrays had only one element, the path of the destination route.
This link parameters array has two elements, the path of the destination route and a route parameter with an id
field set to the value of the selected hero's id
.
The two array items align with the path and :id token in the parameterized hero detail route definition we added to app.routing.ts
earlier in the chapter:
app/app.routing.ts (hero detail)
{ path: 'detail/:id', component: HeroDetailComponent },
The DashboardComponent
doesn't have the router yet. We obtain it in the usual way: import the router
reference and inject it in the constructor (along with the HeroService
):
import { Router } from '@angular/router';
constructor( private router: Router, private heroService: HeroService) { }
Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details.
Select a Hero in the HeroesComponent
We'll do something similar in the HeroesComponent
.
That component's current template exhibits a "master/detail" style with the list of heroes at the top and details of the selected hero below.
app/heroes.component.ts (current template)
template: ` <h1>{{title}}</h1> <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <my-hero-detail [hero]="selectedHero"></my-hero-detail> `,
Delete the <h1>
at the top (forgot about it during the AppComponent
-to-HeroesComponent
conversion).
Delete the last line of the template with the <my-hero-detail>
tags.
We'll no longer show the full HeroDetailComponent
here. We're going to display the hero detail on its own page and route to it as we did in the dashboard.
But we'll throw in a small twist for variety. When the user selects a hero from the list, we won't go to the detail page. We'll show a mini-detail on this page instead and make the user click a button to navigate to the full detail page.
Add the mini-detail
Add the following HTML fragment at the bottom of the template where the <my-hero-detail>
used to be:
<div *ngIf="selectedHero"> <h2> {{selectedHero.name | uppercase}} is my hero </h2> <button (click)="gotoDetail()">View Details</button> </div>
After clicking a hero, the user should see something like this below the hero list:
Format with the uppercase pipe
Notice that the hero's name is displayed in CAPITAL LETTERS. That's the effect of the uppercase
pipe that we slipped into the interpolation binding. Look for it right after the pipe operator ( | ).
{{selectedHero.name | uppercase}} is my hero
Pipes are a good way to format strings, currency amounts, dates and other display data. Angular ships with several pipes and we can write our own.
Learn about pipes in the Pipes chapter.
Move content out of the component file
We are not done. We still have to update the component class to support navigation to the HeroDetailComponent
when the user clicks the View Details button.
This component file is really big. Most of it is either template or CSS styles. It's difficult to find the component logic amidst the noise of HTML and CSS.
Let's migrate the template and the styles to their own files before we make any more changes:
- Cut-and-paste the template contents into a new heroes.component.html file.
- Cut-and-paste the styles contents into a new heroes.component.css file.
-
Set the component metadata's
templateUrl
andstyleUrls
properties to refer to both files.
The styleUrls
property is an array of style file names (with paths). We could list multiple style files from different locations if we needed them. As with templateUrl
, we must specify the path all the way back to the application root.
app/heroes.component.ts (revised metadata)
@Component({ selector: 'my-heroes', templateUrl: 'app/heroes.component.html', styleUrls: ['app/heroes.component.css'] })
Now we can see what's going on as we update the component class along the same lines as the dashboard:
- Import the
router
- Inject the
router
in the constructor (along with theHeroService
) - Implement the
gotoDetail
method by calling therouter.navigate
method
with a two-part hero-detail link parameters array.
Here's the revised component class:
app/heroes.component.ts (class)
export class HeroesComponent implements OnInit { heroes: Hero[]; selectedHero: Hero; constructor( private router: Router, private heroService: HeroService) { } getHeroes(): void { this.heroService.getHeroes().then(heroes => this.heroes = heroes); } ngOnInit(): void { this.getHeroes(); } onSelect(hero: Hero): void { this.selectedHero = hero; } gotoDetail(): void { this.router.navigate(['/detail', this.selectedHero.id]); } }
Refresh the browser and start clicking. We can navigate around the app, from the dashboard to hero details and back, for heroes list to the mini-detail to the hero details and back to the heroes again. We can jump back and forth between the dashboard and the heroes.
We've met all of the navigational requirements that propelled this chapter.
Styling the App
The app is functional but pretty ugly. Our creative designer team provided some CSS files to make it look better.
A Dashboard with Style
The designers think we should display the dashboard heroes in a row of rectangles. They've given us ~60 lines of CSS for this purpose including some simple media queries for responsive design.
If we paste these ~60 lines into the component styles
metadata, they'll completely obscure the component logic. Let's not do that. It's easier to edit CSS in a separate *.css
file anyway.
Add a dashboard.component.css file to the app
folder and reference that file in the component metadata's styleUrls
array property like this:
app/dashboard.component.ts (styleUrls)
styleUrls: ['app/dashboard.component.css']
Stylish Hero Details
The designers also gave us CSS styles specifically for the HeroDetailComponent
.
Add a hero-detail.component.css to the app
folder and refer to that file inside the styleUrls
array as we did for DashboardComponent
. Let's also remove the hero
property @Input
decorator and its import while we are at it.
Here's the content for the aforementioned component CSS files.
label { display: inline-block; width: 3em; margin: .5em 0; color: #607D8B; font-weight: bold; } input { height: 2em; font-size: 1em; padding-left: .4em; } button { margin-top: 20px; font-family: Arial; background-color: #eee; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; cursor: hand; } button:hover { background-color: #cfd8dc; } button:disabled { background-color: #eee; color: #ccc; cursor: auto; }
[class*='col-'] { float: left; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } h3 { text-align: center; margin-bottom: 0; } [class*='col-'] { padding-right: 20px; padding-bottom: 20px; } [class*='col-']:last-of-type { padding-right: 0; } .grid { margin: 0; } .col-1-4 { width: 25%; } .module { padding: 20px; text-align: center; color: #eee; max-height: 120px; min-width: 120px; background-color: #607D8B; border-radius: 2px; } h4 { position: relative; } .module:hover { background-color: #EEE; cursor: pointer; color: #607d8b; } .grid-pad { padding: 10px 0; } .grid-pad > [class*='col-']:last-of-type { padding-right: 20px; } @media (max-width: 600px) { .module { font-size: 10px; max-height: 75px; } } @media (max-width: 1024px) { .grid { margin: 0; } .module { min-width: 60px; } }
Style the Navigation Links
The designers gave us CSS to make the navigation links in our AppComponent
look more like selectable buttons. We cooperated by surrounding those links in <nav>
tags.
Add a app.component.css file to the app
folder with the following content.
app/app.component.css (navigation styles)
h1 { font-size: 1.2em; color: #999; margin-bottom: 0; } h2 { font-size: 2em; margin-top: 0; padding-top: 0; } nav a { padding: 5px 10px; text-decoration: none; margin-top: 10px; display: inline-block; background-color: #eee; border-radius: 4px; } nav a:visited, a:link { color: #607D8B; } nav a:hover { color: #039be5; background-color: #CFD8DC; } nav a.active { color: #039be5; }
The routerLinkActive directive
The Angular Router provides a routerLinkActive
directive we can use to add a class to the HTML navigation element whose route matches the active route. All we have to do is define the style for it. Sweet!
app/app.component.ts (active router links)
template: ` <h1>{{title}}</h1> <nav> <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a> <a routerLink="/heroes" routerLinkActive="active">Heroes</a> </nav> <router-outlet></router-outlet> `,
Set the AppComponent
’s styleUrls
property to this CSS file.
app/app.component.ts (styleUrls)
styleUrls: ['app/app.component.css'],
Global application styles
When we add styles to a component, we're keeping everything a component needs — HTML, the CSS, the code — together in one convenient place. It's pretty easy to package it all up and re-use the component somewhere else.
We can also create styles at the application level outside of any component.
Our designers provided some basic styles to apply to elements across the entire app. These correspond to the full set of master styles that we introduced earlier (see QuickStart, "Add some style"). Here is an excerpt:
styles.css (excerpt)
/* Master Styles */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; } body, input[text], button { color: #888; font-family: Cambria, Georgia; } /* . . . */ /* everywhere else */ * { font-family: Arial, Helvetica, sans-serif; }
Create the file styles.css, if it doesn't exist already. Ensure that it contains the master styles given here.
If necessary, also edit index.html to refer to this stylesheet.
index.html (link ref)
<link rel="stylesheet" href="styles.css">
Look at the app now. Our dashboard, heroes, and navigation links are styling!
Application structure and code
Review the sample source code in the live example for this chapter. Verify that we have the following structure:
Recap
The Road Behind
We travelled a great distance in this chapter
- We added the Angular Component Router to navigate among different components.
- We learned how to create router links to represent navigation menu items.
- We used router link parameters to navigate to the details of user selected hero.
- We shared the
HeroService
among multiple components. - We moved HTML and CSS out of the component file and into their own files.
- We added the
uppercase
pipe to format data.
The Road Ahead
We have much of the foundation we need to build an application. We're still missing a key piece: remote data access.
In the next chapter, we’ll replace our mock data with data retrieved from a server using http.
Please login to continue.