Add hero details, routes, params

package.json

@@ -26,9 +26,10 @@
  "@angular/router": "^6.0.5",
  "bootstrap": "^4.0.0-beta.2",
  "core-js": "^2.4.1",
+ "ngx-take-until-destroy": "^3.0.0",
  "rxjs": "^6.2.1",
- "zone.js": "^0.8.26",
- "rxjs-compat": "^6.0.0-rc.0"
+ "rxjs-compat": "^6.0.0-rc.0",
+ "zone.js": "^0.8.26"
  },
  "devDependencies": {
  "@angular-devkit/build-angular": "~0.6.8",

src/app/app.component.scss

@@ -1,7 +0,0 @@
-nav {
- a {
- &.active {
- font-weight: bold;
- }
- }
-}

src/app/heroes/hero-details/hero-details.component.html

@@ -0,0 +1,12 @@
+
+<h3>Hero list</h3>
+<ul>
+ <li *ngFor="let hero of heroes; trackBy: byId">
+ <a [routerLink]="[ '/heroes', hero.id ]" routerLinkActive="active">{{ hero.name }}</a>
+ </li>
+</ul>
+
+<hr>
+
+<h3>Hero</h3>
+<pre>{{ activeHero | json }}</pre>

src/app/heroes/hero-details/hero-details.component.spec.ts

@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { HeroDetailsComponent } from './hero-details.component';
+
+describe('HeroDetailsComponent', () => {
+ let component: HeroDetailsComponent;
+ let fixture: ComponentFixture<HeroDetailsComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [HeroDetailsComponent],
+ imports: [RouterTestingModule],
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HeroDetailsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

src/app/heroes/hero-details/hero-details.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TakeUntilDestroy, untilDestroyed } from 'ngx-take-until-destroy';
+import { map } from 'rxjs/operators';
+
+import { Hero } from '../shared/hero.model';
+
+@Component({
+ selector: 'app-hero-details',
+ templateUrl: './hero-details.component.html',
+ styleUrls: ['./hero-details.component.scss'],
+})
+@TakeUntilDestroy()
+export class HeroDetailsComponent implements OnInit, OnDestroy {
+ heroes = [
+ new Hero({ id: 1, name: 'Saitama' }),
+ new Hero({ id: 2, name: 'Goku' }),
+ new Hero({ id: 3, name: 'All Might' }),
+ ];
+
+ activeHero: Hero;
+
+ constructor(private route: ActivatedRoute) {}
+
+ ngOnInit() {
+ this.route.paramMap
+ .pipe(map((params) => +params.get('id')))
+ .pipe(untilDestroyed(this))
+ .subscribe((id) => {
+ this.activeHero = this.heroes.find((hero) => hero.id === id);
+ });
+ }
+
+ ngOnDestroy() {
+ }
+
+ byId(_, hero: Hero) {
+ return hero.id;
+ }
+}

src/app/heroes/heroes.component.spec.ts

@@ -8,9 +8,8 @@ describe('HeroesComponent', () => {
 
  beforeEach(async(() => {
  TestBed.configureTestingModule({
- declarations: [ HeroesComponent ]
- })
- .compileComponents();
+ declarations: [HeroesComponent],
+ }).compileComponents();
  }));
 
  beforeEach(() => {

src/app/heroes/heroes.module.ts

@@ -2,12 +2,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { ReactiveFormsModule } from '../../../node_modules/@angular/forms';
+import { HeroDetailsComponent } from './hero-details/hero-details.component';
 import { HeroEditComponent } from './hero-edit/hero-edit.component';
 import { HeroesComponent } from './heroes.component';
 import { RoutingModule } from './heroes.router';
 
 @NgModule({
  imports: [RoutingModule, CommonModule, ReactiveFormsModule],
- declarations: [HeroesComponent, HeroEditComponent],
+ declarations: [HeroesComponent, HeroEditComponent, HeroDetailsComponent],
 })
 export class HeroesModule {}

src/app/heroes/heroes.router.ts

@@ -1,5 +1,6 @@
 import { RouterModule, Routes } from '@angular/router';
 
+import { HeroDetailsComponent } from './hero-details/hero-details.component';
 import { HeroEditComponent } from './hero-edit/hero-edit.component';
 import { HeroesComponent } from './heroes.component';
 
@@ -13,6 +14,11 @@ const routes: Routes = [
  path: 'new',
  component: HeroEditComponent,
  },
+
+ {
+ path: ':id',
+ component: HeroDetailsComponent,
+ },
 ];
 
 export const RoutingModule = RouterModule.forChild(routes);

src/app/heroes/shared/hero.model.ts

@@ -0,0 +1,8 @@
+export class Hero {
+ id: number;
+ name: string;
+
+ constructor(hero: Partial<Hero>) {
+ Object.assign(this, hero);
+ }
+}

src/assets/css/index.scss

@@ -12,6 +12,12 @@ legend {
  padding: .2em .5em;
 }
 
+a {
+ &.active {
+ font-weight: bold;
+ }
+}
+
 form {
  .ng-touched, .ng-dirty {
  &.ng-invalid {