2015-10-23 19:05:17 -07:00
										 
									 
								 
							 | 
							
								
							 | 
							
								
							 | 
							
							
								// #docregion
							 | 
						
					
						
							
								
									
										
										
										
											2016-05-03 14:06:32 +02:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								import { Component } from '@angular/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
							 | 
						
					
						
							
								
									
										
										
										
											2016-04-29 01:36:35 +01:00
										 
									 
								 
							 | 
							
								
									
										
									
								
							 | 
							
								
							 | 
							
							
								      <li *ngFor="let 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
							 |