26 lines
		
	
	
		
			594 B
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
		
		
			
		
	
	
			26 lines
		
	
	
		
			594 B
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
| 
								 | 
							
								// #docregion
							 | 
						||
| 
								 | 
							
								import {Component} from 'angular2/core';
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								// #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>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								    <ul><li *ngFor="#hero of heroes">{{hero}}</li></ul>
							 | 
						||
| 
								 | 
							
								  `
							 | 
						||
| 
								 | 
							
								})
							 | 
						||
| 
								 | 
							
								export class LittleTourComponent {
							 | 
						||
| 
								 | 
							
								  heroes=['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
							 | 
						||
| 
								 | 
							
								  addHero(newHero:string) {
							 | 
						||
| 
								 | 
							
								    if (newHero) {
							 | 
						||
| 
								 | 
							
								      this.heroes.push(newHero);
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								// #enddocregion little-tour
							 |