5: Add In-app Navigation

d) Navigating to hero details

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index b0354f5f5ec27f88b8e9d7097a137eacec3acde5..2a250c9ca036de19fd29c00c3a9363a2a4f81e96 100644 (file)
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -2,11 +2,13 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HeroesComponent } from './heroes/heroes.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { HeroDetailComponent} from './hero-detail/hero-detail.component';
 
 
 const routes : Routes = [
   { path: '', redirectTo: 'dashboard', pathMatch: 'full'},
   { path: 'heroes', component: HeroesComponent },
+  { path: 'detail/:id', component: HeroDetailComponent },
   { path: 'dashboard', component: DashboardComponent }
 ];
 

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index ddb4fd29f8e1404c722e10c9880df00496f64c81..1fc389bfe5cdd1d59847d83be17f4961914d7f54 100644 (file)
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,6 +1,6 @@
 <h3>Top Heroes</h3>
 <div class="grid grid-pad">
-  <a *ngFor="let hero of heroes" class="col-1-4">
+  <a *ngFor="let hero of heroes" class="col-1-4" routerLink="/detail/{{hero.id}}">
     <div class="module hero">
       <h4>{{hero.name}}</h4>
     </div>

diff --git a/src/app/heroes/heroes.component.css b/src/app/heroes/heroes.component.css
index 9759a4211be6324f1917c749aa0407d80f769750..2ad3fefb31409a5d5225cc57c91951cf2c763bd4 100644 (file)
--- a/src/app/heroes/heroes.component.css
+++ b/src/app/heroes/heroes.component.css
@@ -6,28 +6,33 @@
   width: 15em;
 }
 .heroes li {
-  cursor: pointer;
   position: relative;
-  left: 0;
+  cursor: pointer;
   background-color: #EEE;
   margin: .5em;
   padding: .3em 0;
   height: 1.6em;
   border-radius: 4px;
 }
+
 .heroes li:hover {
   color: #607D8B;
   background-color: #DDD;
   left: .1em;
 }
-.heroes li.selected {
-  background-color: #CFD8DC;
-  color: white;
+
+.heroes a {
+  color: #333;
+  text-decoration: none;
+  position: relative;
+  display: block;
+  width: 250px;
 }
-.heroes li.selected:hover {
-  background-color: #BBD8DC;
-  color: white;
+
+.heroes a:hover {
+  color:#607D8B;
 }
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
@@ -39,6 +44,8 @@
   left: -1px;
   top: -4px;
   height: 1.8em;
+  min-width: 16px;
+  text-align: right;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }

diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html
index a2e93c252c2279f21f5547218c09bf59ed4947a1..2eb180e097b5b5eaf1a920a63d942efa5bced078 100644 (file)
--- a/src/app/heroes/heroes.component.html
+++ b/src/app/heroes/heroes.component.html
@@ -1,7 +1,8 @@
 <h2>My Heroes</h2>
 <ul class="heroes">
-  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  <li *ngFor="let hero of heroes">
+    <a routerLink="/detail/{{hero.id}}">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </a>
   </li>
 </ul>
-<app-hero-detail [hero]="selectedHero"></app-hero-detail>

diff --git a/src/app/heroes/heroes.component.ts b/src/app/heroes/heroes.component.ts
index d8ac6427f3a4182b2b48225e65c4a8ab53553f5f..eaa069b6e613f3766bb3f49c01ede1dd35487bbb 100644 (file)
--- a/src/app/heroes/heroes.component.ts
+++ b/src/app/heroes/heroes.component.ts
@@ -12,13 +12,6 @@ export class HeroesComponent implements OnInit {
 
   heroes: Hero[];
 
-  selectedHero : Hero;
-
-  onSelect(hero : Hero): void {
-    this.selectedHero = hero;
-    this.messageService.add(`HeroService: Selected hero id=${hero.id}`);
-  }
-
   constructor(
       private heroService : HeroService,
       private messageService : MessageService) { }