v0.15.0: Rota HeroDetail

src/app/app-routing.module.ts

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { HeroDetailComponent } from './hero-detail/hero-detail.component';
 import { HeroesComponent } from './heroes/heroes.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
   { path: 'heroes', component: HeroesComponent },
+  { path: 'heroes/:id', component: HeroDetailComponent },
   { path: 'dashboard', component: DashboardComponent },
 ];
 

src/app/hero-detail/hero-detail.component.html

@@ -23,6 +23,10 @@ <h2>{{ hero.name | uppercase }} Detail</h2>
           [(ngModel)]="hero.name"
         />
       </div>
+
+      <button class="btn btn-secondary" type="button" (click)="goBack()">
+        Back
+      </button>
     </div>
   </div>
 </div>

src/app/hero-detail/hero-detail.component.ts

@@ -1,5 +1,8 @@
+import { Location } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { Hero } from '../hero.model';
+import { HeroService } from '../hero.service';
 
 @Component({
   selector: 'app-hero-detail',
@@ -9,7 +12,23 @@ import { Hero } from '../hero.model';
 export class HeroDetailComponent implements OnInit {
   @Input() hero: Hero;
 
-  constructor() {}
+  constructor(
+    private route: ActivatedRoute,
+    private location: Location,
+    private heroService: HeroService
+  ) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.getHero();
+  }
+
+  getHero(): void {
+    const id = +this.route.snapshot.paramMap.get('id');
+
+    this.heroService.getHero(id).subscribe((hero) => (this.hero = hero));
+  }
+
+  goBack() {
+    this.location.back();
+  }
 }

src/app/hero.service.ts

@@ -14,4 +14,9 @@ export class HeroService {
     this.messageService.add('HeroService: fetched heroes');
     return of(HEROES);
   }
+
+  getHero(id: number): Observable<Hero> {
+    this.messageService.add(`HeroService: fetched hero id=${id}`);
+    return of(HEROES.find((hero) => hero.id === id));
+  }
 }

src/app/heroes/heroes.component.html

@@ -3,13 +3,12 @@ <h2>My Heroes</h2>
 <ul class="list-group mb-3">
   <li
     class="list-group-item d-flex justify-content-between align-items-center"
-    [class.active]="hero === selectedHero"
     *ngFor="let hero of heroes"
-    (click)="onSelect(hero)"
   >
-    {{ hero.name }}
+    <a routerLink="/heroes/{{ hero.id }}">
+      {{ hero.name }}
+    </a>
+
     <span class="badge badge-primary badge-pill">{{ hero.id }}</span>
   </li>
 </ul>
-
-<app-hero-detail [hero]="selectedHero"></app-hero-detail>

src/app/heroes/heroes.component.ts

@@ -1,32 +1,21 @@
 import { Component, OnInit } from '@angular/core';
 import { Hero } from '../hero.model';
 import { HeroService } from '../hero.service';
-import { MessageService } from '../message.service';
 
 @Component({
   selector: 'app-heroes',
   templateUrl: './heroes.component.html',
   styleUrls: ['./heroes.component.css'],
 })
 export class HeroesComponent implements OnInit {
-  selectedHero: Hero;
-
   heroes: Hero[];
 
-  constructor(
-    private heroService: HeroService,
-    private messageService: MessageService
-  ) {}
+  constructor(private heroService: HeroService) {}
 
   ngOnInit(): void {
     this.getHeroes();
   }
 
-  onSelect(hero: Hero) {
-    this.selectedHero = hero;
-    this.messageService.add(`HerosComponent: Selected hero id=${hero.id}`);
-  }
-
   getHeroes(): void {
     this.heroService.getHeroes().subscribe((heroes) => (this.heroes = heroes));
   }