Scribd
Upload
18 views

Angular - Add Dashborad

The document describes adding a dashboard view and navigation capabilities to an Angular application. It includes generating a DashboardComponent, adding dashboard and hero detail routes, and linking between components. Code snippets are provided to demonstrate integrating these features.

Uploaded by

Babu Sharath
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

Angular - Add Dashborad

The document describes adding a dashboard view and navigation capabilities to an Angular application. It includes generating a DashboardComponent, adding dashboard and hero detail routes, and linking between components. Code snippets are provided to demonstrate integrating these features.

Uploaded by

Babu Sharath
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Add a dashboard view

Routing makes more sense when your application has more than one

view, yet the Tour of Heroes application has only the heroes view.

To add a DashboardComponent , run ng generate as shown here:

ng generate component dashboard

ng generate creates the �les for the DashboardComponent and

declares it in AppModule .

Replace the default content in these �les as shown here:

src/app/dashboard/dashboard.component.html src/app/dashboard/dashboard.comp

Top Heroes
class="heroes-menu"
*ngFor="let hero of heroes"
{{hero.name}}

The template presents a grid of hero name links.

• The *ngFor repeater creates as many links as are in the


component's heroes array.

• The links are styled as colored blocks by the


dashboard.component.css .

• The links don't go anywhere yet.


The class is like the HeroesComponent class.

• It de�nes a heroes array property

• The constructor expects Angular to inject the HeroService into a


private heroService property

• The ngOnInit() lifecycle hook calls getHeroes()

This getHeroes() returns the sliced list of heroes at positions 1 and 5,

returning only Heroes two, three, four, and �ve.

src/app/dashboard/dashboard.component.ts

getHeroes(): {
.heroService.getHeroes()
.subscribe(heroes => .heroes =
heroes.slice(1, 5));
}

Add the dashboard route


To navigate to the dashboard, the router needs an appropriate route.

Import the DashboardComponent in the app-routing.module.ts �le.

src/app/app-routing.module.ts (import DashboardComponent)

{ } '.∕dashboard
∕dashboard.component';

Add a route to the routes array that matches a path to the

DashboardComponent .

src/app/app-routing.module.ts

{ path: 'dashboard', component: },

Add a default route


When the application starts, the browser's address bar points to the web

site's root. That doesn't match any existing route so the router doesn't

navigate anywhere. The space below the <router-outlet> is blank.

To make the application navigate to the dashboard automatically, add

the following route to the routes array.

src/app/app-routing.module.ts

{ path: '', redirectTo: '∕dashboard', pathMatch:


'full' },

This route redirects a URL that fully matches the empty path to the route

whose path is '∕dashboard' .

After the browser refreshes, the router loads the DashboardComponent

and the browser address bar shows the ∕dashboard URL.

Add dashboard link to the shell


The user should be able to navigate between the DashboardComponent

and the HeroesComponent by clicking links in the navigation area near

the top of the page.

Add a dashboard navigation link to the AppComponent shell template,

just above the Heroes link.

src/app/app.component.html

{{title}}

routerLink="∕dashboard" Dashboard

routerLink="∕heroes" Heroes
After the browser refreshes you can navigate freely between the two

views by clicking the links.

Navigating to hero details


The HeroDetailComponent displays details of a selected hero. At the

moment the HeroDetailComponent is only visible at the bottom of the

HeroesComponent

The user should be able to get to these details in three ways.

1. By clicking a hero in the dashboard.

2. By clicking a hero in the heroes list.

3. By pasting a "deep link" URL into the browser address bar that
identi�es the hero to display.

This section enables navigation to the HeroDetailComponent and

liberates it from the HeroesComponent .

Delete hero details from


When the user clicks a hero in HeroesComponent , the application

should navigate to the HeroDetailComponent , replacing the heroes list

view with the hero detail view. The heroes list view should no longer

show hero details as it does now.

Open the heroes∕heroes.component.html and delete the <app-

hero-detail> element from the bottom.

Clicking a hero item now does nothing. You can �x that after you enable

routing to the HeroDetailComponent .

Add a hero detail route


A URL like ~∕detail∕11 would be a good URL for navigating to the

Hero Detail view of the hero whose id is 11 .

Open app-routing.module.ts and import HeroDetailComponent .

src/app/app-routing.module.ts (import HeroDetailComponent)

{ } '.∕hero-detail
∕hero-detail.component';

Then add a parameterized route to the routes array that matches the

path pattern to the hero detail view.

src/app/app-routing.module.ts

{ path: 'detail∕:id', component:


},

The colon : character in the path indicates that :id is a placeholder

for a speci�c hero id .

At this point, all application routes are in place.

src/app/app-routing.module.ts (all routes)

routes: = [
{ path: '', redirectTo: '∕dashboard', pathMatch:
'full' },
{ path: 'dashboard', component:
},
{ path: 'detail∕:id', component:
},
{ path: 'heroes', component: }
];

You might also like