1: The Hero Editor

e) Edit the hero + AppModule

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 40ad7e6..bc5d602 100644 (file)
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { HeroesComponent } from './heroes/heroes.component';
@@ -10,7 +11,8 @@ import { HeroesComponent } from './heroes/heroes.component';
     HeroesComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/src/app/heroes/heroes.component.html b/src/app/heroes/heroes.component.html
index 822465e..eb1a9a9 100644 (file)
--- a/src/app/heroes/heroes.component.html
+++ b/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>name: </label>
+  <input [(ngModel)]="hero.name" placeholder="Type a name..." />
+</div>