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 b0354f5..2a250c9 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 ddb4fd2..1fc389b 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 9759a42..2ad3fef 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 a2e93c2..2eb180e 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 d8ac642..eaa069b 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) { }