final lesson 1 The hero editor

src/app/app.component.ts

@@ -5,10 +5,9 @@ import { HeroesComponent } from "./heroes/heroes.component";
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
-  imports: [HeroesComponent]
+  styleUrls: ['./app.component.css'],
+  imports: [HeroesComponent] 
 })
 export class App {
-  protected title = 'Tour of Heroes';
+  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,13 @@
 import { Component } from '@angular/core';
 import { Hero } from '../hero';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-heroes',
   templateUrl: './heroes.component.html',
-  styleUrls: ['./heroes.component.css']
+  styleUrls: ['./heroes.component.css'],
+  imports: [CommonModule, FormsModule]
 })
 export class HeroesComponent {
   hero: Hero = {