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>{{hero.name}}</div>
        `
})

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

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

@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
})
export class AppComponent {
    title = 'Tour of Heroes';
    hero = 'Windstorm';
}

--- 
+++ 
@@ -1,10 +1,24 @@
 import { Component } from '@angular/core';
+
+export class Hero {
+  id: number;
+  name: string;
+}
 
 @Component({
     selector: 'my-app',
-    template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
+    template: `
+        <h1>{{title}}</h1>
+        <h2>{{hero.name}} details!</h2>
+        <div><label>id: </label>{{hero.id}}</div>
+        <div><label>name: </label>{{hero.name}}</div>
+        `
 })
+
 export class AppComponent {
     title = 'Tour of Heroes';
-    hero = 'Windstorm';
+    hero: Hero = {
+        id: 1,
+        name: 'Windstorm'
+    };
 }
Add Hero class and update AppComponent template to use ES2015 string
template
