add List heroes with *ngFor

src/app/heroes/heroes.component.html

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

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,7 @@ 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'
-  };
 }