2015-12-13 18:15:46 -05:00
|
|
|
// #docregion
|
2016-05-03 08:06:32 -04:00
|
|
|
import { Component } from '@angular/core';
|
2015-12-13 18:15:46 -05: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-28 20:36:35 -04:00
|
|
|
<ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>
|
2015-12-13 18:15:46 -05:00
|
|
|
`
|
|
|
|
})
|
|
|
|
export class LittleTourComponent {
|
|
|
|
heroes=['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
|
|
|
|
addHero(newHero:string) {
|
|
|
|
if (newHero) {
|
|
|
|
this.heroes.push(newHero);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// #enddocregion little-tour
|