diff --git a/package-lock.json b/package-lock.json
index ab06792..1310e51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8193,6 +8193,21 @@
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
+    "ngx-take-until-destroy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-take-until-destroy/-/ngx-take-until-destroy-3.0.0.tgz",
+      "integrity": "sha512-CCHROYUUOxhJRlNmfZPCJAegxo3MGgK3Tubb6FuF2mOPxRpwk9LCVITW9kEJvGnbW3aoBQwoJhgmnLWQZGPGRQ==",
+      "requires": {
+        "@types/node": "^10.1.4"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "10.3.3",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.3.tgz",
+          "integrity": "sha512-/gwCgiI2e9RzzZTKbl+am3vgNqOt7a9fJ/uxv4SqYKxenoEDNVU3KZEadlpusWhQI0A0dOrZ0T68JYKVjzmgdQ=="
+        }
+      }
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
diff --git a/package.json b/package.json
index 1f0a789..90665c1 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index a6e9ac6..e69de29 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,7 +0,0 @@
-nav {
-  a {
-    &.active {
-      font-weight: bold;
-    }
-  }
-}
diff --git a/src/app/heroes/hero-details/hero-details.component.html b/src/app/heroes/hero-details/hero-details.component.html
new file mode 100644
index 0000000..9f048ce
--- /dev/null
+++ b/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>
diff --git a/src/app/heroes/hero-details/hero-details.component.scss b/src/app/heroes/hero-details/hero-details.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/heroes/hero-details/hero-details.component.spec.ts b/src/app/heroes/hero-details/hero-details.component.spec.ts
new file mode 100644
index 0000000..c298333
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/heroes/hero-details/hero-details.component.ts b/src/app/heroes/hero-details/hero-details.component.ts
new file mode 100644
index 0000000..2260093
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/app/heroes/heroes.component.spec.ts b/src/app/heroes/heroes.component.spec.ts
index 66518e4..d7771b1 100644
--- a/src/app/heroes/heroes.component.spec.ts
+++ b/src/app/heroes/heroes.component.spec.ts
@@ -8,9 +8,8 @@ describe('HeroesComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HeroesComponent ]
-    })
-    .compileComponents();
+      declarations: [HeroesComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/src/app/heroes/heroes.module.ts b/src/app/heroes/heroes.module.ts
index 66a8205..79aa675 100644
--- a/src/app/heroes/heroes.module.ts
+++ b/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 {}
diff --git a/src/app/heroes/heroes.router.ts b/src/app/heroes/heroes.router.ts
index 3eec365..9dc7fe9 100644
--- a/src/app/heroes/heroes.router.ts
+++ b/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);
diff --git a/src/app/heroes/shared/hero.model.ts b/src/app/heroes/shared/hero.model.ts
new file mode 100644
index 0000000..896286c
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
index 94fcdbe..c8c9c8d 100644
--- a/src/assets/css/index.scss
+++ b/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 {