add Style the selected hero

src/app/heroes/heroes.component.css

@@ -0,0 +1,66 @@
+/* HeroesComponent's private CSS styles */
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  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;
+}
+
+.heroes button:hover {
+  color: #2c3a41;
+  background-color: #e6e6e6;
+  left: .1em;
+}
+
+.heroes button: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;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #405061;
+  line-height: 1em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+
+.heroes .name {
+  align-self: center;
+}

src/app/heroes/heroes.component.html

@@ -1,6 +1,18 @@
-<h2>{{hero.name | uppercase}} Details</h2>
+<h2>My Heroes</h2>
-<div><span>id: </span>{{hero.id}}</div>
+<ul class="heroes">
+  <li *ngFor="let hero of heroes">
+    <button type="button" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
+      <span class="badge">{{hero.id}}</span>
+      <span class="name">{{hero.name}}</span>
+    </button>
+  </li>
+</ul>
+
+<div *ngIf="selectedHero">
+  <h2>{{selectedHero.name | uppercase}} Details</h2>
+  <div>id: {{selectedHero.id}}</div>
   <div>
-  <label for="name">Hero name: </label>
+    <label for="hero-name">Hero name: </label>
-  <input id="name" [(ngModel)]="hero.name" placeholder="name">
+    <input id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">
+  </div>
 </div>

src/app/heroes/heroes.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { Hero } from '../hero';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import {HEROES} from '../mock-heroes';
 
 @Component({
   selector: 'app-heroes',
@@ -9,9 +10,15 @@ import { FormsModule } from '@angular/forms';
   styleUrls: ['./heroes.component.css'],
   imports: [CommonModule, FormsModule]
 })
-export class HeroesComponent {
+
-  hero: Hero = {
+export class HeroesComponent { //определяем класс со списком героев
-    id: 1,
+  heroes = HEROES;
-    name: 'Windstorm'
+  selectedHero?: Hero;
-  };
+
+  onSelect(hero: Hero): void {
+  this.selectedHero = hero;
   }
+
+}
+
+

src/app/mock-heroes.ts

@@ -0,0 +1,13 @@
+import { Hero } from './hero'; //список героеев
+
+export const HEROES: Hero[] = [
+  { id: 12, name: 'Dr. Nice' },
+  { id: 13, name: 'Bombasto' },
+  { id: 14, name: 'Celeritas' },
+  { id: 15, name: 'Magneta' },
+  { id: 16, name: 'RubberMan' },
+  { id: 17, name: 'Dynama' },
+  { id: 18, name: 'Dr. IQ' },
+  { id: 19, name: 'Magma' },
+  { id: 20, name: 'Tornado' }
+];