final Add navigation

src/app/app.component.css

@@ -0,0 +1,21 @@
+/* AppComponent's private CSS styles */
+h1 {
+  margin-bottom: 0;
+}
+nav a {
+  padding: 1rem;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #e8e8e8;
+  color: #3d3d3d;
+  border-radius: 4px;
+}
+
+nav a:hover {
+  color: white;
+  background-color: #42545C;
+}
+nav a:active {
+  background-color: black;
+}

src/app/app.component.html

@@ -1,3 +1,7 @@
 <h1>{{title}}</h1>
-<app-heroes></app-heroes>
+<nav>
+  <a routerLink="/dashboard">Dashboard</a>
+  <a routerLink="/heroes">Heroes</a>
+</nav>
+<router-outlet></router-outlet>
 <app-messages></app-messages>

src/app/app.component.ts

@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
-import { HeroesComponent } from "./heroes/heroes.component";
+
 import { MessagesComponent } from "./messages/messages.component";
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  imports: [HeroesComponent, MessagesComponent] 
+  imports: [MessagesComponent, RouterOutlet, RouterLink] 
 })
 
 export class App {

src/app/app.routes.ts

@@ -1,3 +1,13 @@
 import { Routes } from '@angular/router';
+import { HeroesComponent } from './heroes/heroes.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { HeroDetailComponent } from './hero-detail/hero-detail.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+
+    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },  //путь по умолчанию
+    { path: 'heroes', component: HeroesComponent },
+    { path: 'dashboard', component: DashboardComponent },
+    { path: 'detail/:id', component: HeroDetailComponent },
+
+];

src/app/dashboard/dashboard.component.css

@@ -0,0 +1,50 @@
+/* DashboardComponent's private CSS styles */
+
+h2 {
+  text-align: center;
+}
+
+.heroes-menu {
+  padding: 0;
+  margin: auto;
+  max-width: 1000px;
+
+  /* flexbox */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-content: flex-start;
+  align-items: flex-start;
+}
+
+a {
+  background-color: #3f525c;
+  border-radius: 2px;
+  padding: 1rem;
+  font-size: 1.2rem;
+  text-decoration: none;
+  display: inline-block;
+  color: #fff;
+  text-align: center;
+  width: 100%;
+  min-width: 70px;
+  margin: .5rem auto;
+  box-sizing: border-box;
+
+  /* flexbox */
+  order: 0;
+  flex: 0 1 auto;
+  align-self: auto;
+}
+
+@media (min-width: 600px) {
+  a {
+    width: 18%;
+    box-sizing: content-box;
+  }
+}
+
+a:hover {
+  background-color: #000;
+}

src/app/dashboard/dashboard.component.html

@@ -0,0 +1,7 @@
+<h2>Top Heroes</h2>
+<div class="heroes-menu">
+  <a *ngFor="let hero of heroes"
+    routerLink="/detail/{{hero.id}}">
+    {{hero.name}}
+  </a>
+</div>

src/app/dashboard/dashboard.component.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Hero } from '../hero';
+import { HeroService } from '../hero.service';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-dashboard.component',
+  imports: [CommonModule, RouterLink],
+  templateUrl: './dashboard.component.html',
+  styleUrl: './dashboard.component.css'
+})
+export class DashboardComponent implements OnInit {
+  heroes: Hero[] = [];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit(): void {
+    this.getHeroes();
+  }
+
+  getHeroes(): void {
+    this.heroService.getHeroes()
+      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
+  }
+
+ 
+}

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

@@ -0,0 +1,24 @@
+/* HeroDetailComponent's private CSS styles */
+label {
+  color: #435960;
+  font-weight: bold;
+}
+input {
+  font-size: 1em;
+  padding: .5rem;
+}
+button {
+  margin-top: 20px;
+  background-color: #eee;
+  padding: 1rem;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+button:hover {
+  background-color: #cfd8dc;
+}
+button:disabled {
+  background-color: #eee;
+  color: #ccc;
+  cursor: auto;
+}

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

@@ -1,5 +1,7 @@
 <div *ngIf="hero">
 
+  <button type="button" (click)="goBack()">go back</button>
+
   <h2>{{hero.name | uppercase}} Details</h2>
   <div><span>id: </span>{{hero.id}}</div>
   <div>

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

@@ -2,6 +2,10 @@ import {Component, Input} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {Hero} from '../hero';
 import {CommonModule} from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import { HeroService } from '../hero.service';
+import { Location } from '@angular/common';
+
 
 @Component({
   standalone: true,
@@ -12,6 +16,27 @@ import {CommonModule} from '@angular/common';
 })
 
 export class HeroDetailComponent {
+
   @Input() hero?: Hero;
 
+  constructor(
+    private route: ActivatedRoute,
+    private heroService: HeroService,
+    private location: Location
+  ) {}
+
+  goBack(): void {
+    this.location.back();
+  }
+
+  ngOnInit(): void {
+    this.getHero();
+  } 
+
+  getHero(): void {
+    const id = Number(this.route.snapshot.paramMap.get('id'));
+    this.heroService.getHero(id)
+      .subscribe(hero => this.hero = hero);
+  }
+
 }

src/app/hero.service.ts

@@ -10,12 +10,20 @@ import { MessageService } from './message.service';
 
 export class HeroService {
 
+  constructor(private messageService: MessageService) { }
+
 getHeroes(): Observable<Hero[]> {
   const heroes = of(HEROES);
   this.messageService.add('HeroService: fetched heroes');
   return heroes;
 }
 
-  constructor(private messageService: MessageService) { }
+  getHero(id: number): Observable<Hero> {
+    // For now, assume that a hero with the specified `id` always exists.
+    // Error handling will be added in the next step of the tutorial.
+    const hero = HEROES.find(h => h.id === id)!;
+    this.messageService.add(`HeroService: fetched hero id=${id}`);
+    return of(hero);
   }
 
+}

src/app/heroes/heroes.component.css

@@ -5,51 +5,37 @@
   padding: 0;
   width: 15em;
 }
-
 .heroes li {
-  display: flex;
-}
-
-.heroes button {
-  flex: 1;
-  cursor: pointer;
   position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: 0;
-  border-radius: 4px;
-  display: flex;
-  align-items: stretch;
-  height: 1.8em;
+  cursor: pointer;
 }
 
-.heroes button:hover {
-  color: #2c3a41;
-  background-color: #e6e6e6;
+.heroes li:hover {
   left: .1em;
 }
 
-.heroes button:active {
+.heroes a {
+  color: #333;
+  text-decoration: none;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+  display: block;
+  width: 100%;
+}
+
+.heroes a:hover {
+  color: #2c3a41;
+  background-color: #e6e6e6;
+}
+
+.heroes a:active {
   background-color: #525252;
   color: #fafafa;
 }
 
-.heroes button.selected {
-  background-color: black;
-  color: white;
-}
-
-.heroes button.selected:hover {
-  background-color: #505050;
-  color: white;
-}
-
-.heroes button.selected:active {
-  background-color: black;
-  color: white;
-}
-
 .heroes .badge {
   display: inline-block;
   font-size: small;
@@ -57,10 +43,12 @@
   padding: 0.8em 0.7em 0 0.7em;
   background-color: #405061;
   line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  min-width: 16px;
+  text-align: right;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
-
-.heroes .name {
-  align-self: center;
-}

src/app/heroes/heroes.component.html

@@ -1,12 +1,8 @@
 <h2>My Heroes</h2>
-
 <ul class="heroes">
   <li *ngFor="let hero of heroes">
-    <button [class.selected]="hero === selectedHero" type="button" (click)="onSelect(hero)">
-      <span class="badge">{{hero.id}}</span>
-      <span class="name">{{hero.name}}</span>
-    </button>
+    <a routerLink="/detail/{{hero.id}}">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </a>
   </li>
 </ul>
-
-<app-hero-detail [hero]="selectedHero"></app-hero-detail>

src/app/heroes/heroes.component.ts

@@ -5,12 +5,13 @@ import { FormsModule } from '@angular/forms';
 import { HeroService } from '../hero.service'; //новая библиотека добавлена вместо HEROES
 import { HeroDetailComponent } from '../hero-detail/hero-detail.component';
 import { MessageService } from '../message.service';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-heroes',
   templateUrl: './heroes.component.html',
   styleUrls: ['./heroes.component.css'],
-  imports: [CommonModule, FormsModule, HeroDetailComponent]
+  imports: [CommonModule, FormsModule, RouterLink]
 })
 
 export class HeroesComponent implements OnInit {
@@ -25,10 +26,7 @@ export class HeroesComponent implements OnInit {
     this.getHeroes();
   }
 
-  onSelect(hero: Hero): void {
-    this.selectedHero = hero;
-    this.messageService.add(`HeroesComponent: Selected hero Name=${hero.name}`);
-  }
+  
 
   getHeroes(): void {
     this.heroService.getHeroes()