| 
									
										
										
										
											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
										 |  |  | 
 | 
					
						
							|  |  |  | @Component({ | 
					
						
							|  |  |  |   selector: 'my-app', | 
					
						
							|  |  |  |   // #docregion template
 | 
					
						
							|  |  |  |   template: `
 | 
					
						
							|  |  |  |     <h1>{{title}}</h1> | 
					
						
							|  |  |  |     <h2>My favorite hero is: {{myHero}}</h2> | 
					
						
							|  |  |  |     <p>Heroes:</p> | 
					
						
							|  |  |  |     <ul> | 
					
						
							|  |  |  |   // #docregion li-repeater
 | 
					
						
							| 
									
										
										
										
											2015-12-10 21:41:02 -08:00
										 |  |  |       <li *ngFor="#hero of heroes"> | 
					
						
							| 
									
										
										
										
											2015-10-23 19:05:17 -07:00
										 |  |  |         {{ hero }} | 
					
						
							|  |  |  |       </li> | 
					
						
							|  |  |  |   // #enddocregion li-repeater
 | 
					
						
							|  |  |  |     </ul> | 
					
						
							| 
									
										
										
										
											2015-12-10 21:41:02 -08:00
										 |  |  |   `
 | 
					
						
							| 
									
										
										
										
											2015-10-23 19:05:17 -07:00
										 |  |  |   // #enddocregion template
 | 
					
						
							|  |  |  | }) | 
					
						
							|  |  |  | // #docregion mock-heroes
 | 
					
						
							|  |  |  | export class AppComponent { | 
					
						
							|  |  |  |   title = 'Tour of Heroes'; | 
					
						
							| 
									
										
										
										
											2015-11-01 01:34:17 -02:00
										 |  |  |   heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; | 
					
						
							| 
									
										
										
										
											2015-10-23 19:05:17 -07:00
										 |  |  |   myHero = this.heroes[0]; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | // #enddocregion mock-heroes
 | 
					
						
							|  |  |  | // #enddocregion
 |