import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <h1>{{title}}</h1>
        <h2>{{hero.name}} details!</h2>
        <div><label>id: </label>{{hero.id}}</div>
        <div>
            <label>name: </label>
            <input [(ngModel)]="hero.name" placeholder="name">
        </div>
        `
})
export class AppComponent { 
    title = 'Tour of Heroes';
    hero: Hero = {
        id: 1,
        name: 'Windstorm'
    }
 }

export class Hero {
    id: number;
    name: string;
}
import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

--- 
+++ 
@@ -2,6 +2,25 @@
 
 @Component({
     selector: 'my-app',
-    template: '<h1>My First Angular 2 App</h1>'
+    template: `
+        <h1>{{title}}</h1>
+        <h2>{{hero.name}} details!</h2>
+        <div><label>id: </label>{{hero.id}}</div>
+        <div>
+            <label>name: </label>
+            <input [(ngModel)]="hero.name" placeholder="name">
+        </div>
+        `
 })
-export class AppComponent { }
+export class AppComponent { 
+    title = 'Tour of Heroes';
+    hero: Hero = {
+        id: 1,
+        name: 'Windstorm'
+    }
+ }
+
+export class Hero {
+    id: number;
+    name: string;
+}
Add hero class and two way data binding for name
