feat(ngModel): The Hero Editor

natuan62 · Jul 25, 2017 · 4899195 · 4899195
1 parent 1e8a35c
commit 4899195
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -3,8 +3,32 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  template: `
+  <h3>
+  {{title}}
+  <br>
+  <hr>
+  <input [(ngModel)]="hero.name" placeholder="name">
+  <br>
+  <label>sau khi binding:
+  </label>
+  <br>
+  {{hero.name}}
+  </h3>
+  `
+
 })
 export class AppComponent {
-  title = 'app';
+  title = 'Two-way binding with ngModel';
+  hero: Hero = {
+    id: 1,
+    name: 'danger'
+  }
+}
+
+export class Hero {
+  id: number;
+  name: string;
 }
+
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,14 +1,15 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
 import { AppComponent } from './app.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]