succeed ngFor initialization

angular-tour-of-heroes/src/app/app.component.html

@@ -1 +1,2 @@
-      <h1>Welcome to the {{ title }}</h1>
+      <h1>Welcome to the {{ title }}</h1>
+      <app-heroes></app-heroes>

angular-tour-of-heroes/src/app/app.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { HeroesComponent } from './heroes/heroes.component';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, HeroesComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

angular-tour-of-heroes/src/app/hero.ts

@@ -0,0 +1,4 @@
+export interface Hero {
+  id: number;
+  name: string;
+}

angular-tour-of-heroes/src/app/heroes/heroes.component.html

@@ -0,0 +1,17 @@
+<h2>{{hero.name}} Details</h2>
+<div><span>id: </span>{{hero.id}}</div>
+<div><span>name: </span>{{hero.name}}</div>
+<div>
+  <label for="name">Hero name: </label>
+  <input id="name" [(ngModel)]="hero.name" placeholder="name">
+</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>

angular-tour-of-heroes/src/app/heroes/heroes.component.spec.ts

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

angular-tour-of-heroes/src/app/heroes/heroes.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NgFor } from '@angular/common';
+import  { Hero } from '../hero'
+import { HEROES } from '../mock-heroes';
+
+
+@Component({
+  selector: 'app-heroes',
+  imports: [FormsModule, NgFor],
+  templateUrl: './heroes.component.html',
+  styleUrl: './heroes.component.scss'
+})
+export class HeroesComponent {
+  hero: Hero = {
+    id: 1,
+    name: 'Windstorm'
+  };
+  heroes = HEROES;
+}

angular-tour-of-heroes/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' }
+];