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>{{hero.name}}</div>
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
  id: 10000,
  name: 'Windstorm'
};
}
export class Hero {
  id: number;
  name: string;
}

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>{{hero.name}}</div>'
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
  id: 10000,
  name: 'Windstorm'
};
}
export class Hero {
  id: number;
  name: string;
}

--- 
+++ 
@@ -2,7 +2,11 @@
 
 @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>'
+  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';
Change template to multi-line. Should not change UI
