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

export class Hero {
  id: number;
  name: string;
}

@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 value="{{hero.name}}" placeholder="name">
  </div>
  `
})

export class AppComponent { 
    title = 'Tour of Heroes';
    hero : Hero = { 
        id: 1, 
        name: 'windstorm' 
    };
}

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

export class Hero {
  id: number;
  name: string;
}

@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
})

export class AppComponent { 
    title = 'Tour of Heroes';
    hero : Hero = { 
        id: 1, 
        name: 'windstorm' 
    };
}

--- 
+++ 
@@ -7,7 +7,15 @@
 
 @Component({
     selector: 'my-app',
-    template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
+    template:`
+  <h1>{{title}}</h1>
+  <h2>{{hero.name}} details!</h2>
+  <div><label>id: </label>{{hero.id}}</div>
+  <div>
+    <label>name: </label>
+    <input value="{{hero.name}}" placeholder="name">
+  </div>
+  `
 })
 
 export class AppComponent { 
Change the quotes around the template to back-ticks
