2015-10-23 19:05:17 -07:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
							
								// #docregion
							 | 
						
					
						
							
								
									
										
										
										
											2015-12-10 21:41:02 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								import {Component} from 'angular2/core';
							 | 
						
					
						
							
								
									
										
										
										
											2015-10-23 19:05:17 -07:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
							
								// #docregion import-hero
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								import {Hero} from './hero';
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								// #enddocregion import-hero
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								@Component({
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  selector: 'my-app',
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  // #docregion template
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  template: `
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								    <h1>{{title}}</h1>
							 | 
						
					
						
							
								
									
										
										
										
											2015-12-10 21:41:02 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								    <h2>My favorite hero is: {{myHero.name}}</h2>
							 | 
						
					
						
							
								
									
										
										
										
											2015-10-23 19:05:17 -07:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
							
								    <p>Heroes:</p>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								    <ul>
							 | 
						
					
						
							
								
									
										
										
										
											2015-12-10 21:41:02 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								      <li *ngFor="#hero of heroes">
							 | 
						
					
						
							
								
									
										
										
										
											2015-10-23 19:05:17 -07:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
							
								        {{ hero.name }}
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								      </li>
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								    </ul>
							 | 
						
					
						
							
								
									
										
										
										
											2015-12-10 21:41:02 -08:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								  `
							 | 
						
					
						
							
								
									
										
										
										
											2015-10-23 19:05:17 -07:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  // #enddocregion template
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								})
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								// #docregion class
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								export class AppComponent {
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  title = 'Tour of Heroes';
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  // #docregion heroes
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  heroes = [
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								    new Hero(1, 'Windstorm'),
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								    new Hero(13, 'Bombasto'),
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								    new Hero(15, 'Magneta'),
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								    new Hero(20, 'Tornado')
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  ];
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  myHero = this.heroes[0];
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								  // #enddocregion heroes
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								}
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								// #enddocregion class
							 | 
						
					
						
							| 
								
							 | 
							
								
							 | 
							
								
							 | 
							
							
								// #enddocregion
							 |