add Edit the hero

src/app/app.component.ts

@@ -6,7 +6,8 @@ import { HeroesComponent } from "./heroes/heroes.component";
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
-  imports: [HeroesComponent]
+  imports: [HeroesComponent],
+  
 })
 export class App {
   protected title = 'Tour of Heroes';

src/app/heroes/heroes.component.html

@@ -1,3 +1,6 @@
 <h2>{{hero.name | uppercase}} 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>

src/app/heroes/heroes.component.ts

@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
 import { Hero } from '../hero';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-heroes',
   templateUrl: './heroes.component.html',
-  styleUrls: ['./heroes.component.css']
+  styleUrls: ['./heroes.component.css'],
+  imports: [CommonModule]
 })
 export class HeroesComponent {
   hero: Hero = {