| 
									
										
										
										
											2015-12-13 15:15:46 -08:00
										 |  |  | // #docregion
 | 
					
						
							| 
									
										
										
										
											2016-05-03 14:06:32 +02:00
										 |  |  | import { Component } from '@angular/core'; | 
					
						
							| 
									
										
										
										
											2015-12-13 15:15:46 -08:00
										 |  |  | 
 | 
					
						
							|  |  |  | // #docregion little-tour
 | 
					
						
							|  |  |  | @Component({ | 
					
						
							|  |  |  |   selector: 'little-tour', | 
					
						
							|  |  |  |   template: `
 | 
					
						
							|  |  |  |     <input #newHero | 
					
						
							|  |  |  |       (keyup.enter)="addHero(newHero.value)" | 
					
						
							|  |  |  |       (blur)="addHero(newHero.value); newHero.value='' "> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     <button (click)=addHero(newHero.value)>Add</button> | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2016-04-29 01:36:35 +01:00
										 |  |  |     <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul> | 
					
						
							| 
									
										
										
										
											2015-12-13 15:15:46 -08:00
										 |  |  |   `
 | 
					
						
							|  |  |  | }) | 
					
						
							|  |  |  | export class LittleTourComponent { | 
					
						
							| 
									
										
										
										
											2016-06-08 01:06:25 +02:00
										 |  |  |   heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; | 
					
						
							|  |  |  |   addHero(newHero: string) { | 
					
						
							| 
									
										
										
										
											2015-12-13 15:15:46 -08:00
										 |  |  |     if (newHero) { | 
					
						
							|  |  |  |       this.heroes.push(newHero); | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | // #enddocregion little-tour
 |