65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
|
// #docplaster
|
||
|
|
// #docregion
|
||
|
|
import {Component} from 'angular2/core';
|
||
|
|
import {FlyingHeroesPipe,
|
||
|
|
FlyingHeroesImpurePipe} from './flying-heroes.pipe';
|
||
|
|
import {HEROES} from './heroes';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'flying-heroes',
|
||
|
|
templateUrl: 'app/flying-heroes.component.html',
|
||
|
|
styles: ['#flyers, #all {font-style: italic}'],
|
||
|
|
pipes: [FlyingHeroesPipe]
|
||
|
|
})
|
||
|
|
// #docregion v1
|
||
|
|
export class FlyingHeroesComponent {
|
||
|
|
heroes:any[] = [];
|
||
|
|
canFly = true;
|
||
|
|
// #enddocregion v1
|
||
|
|
mutate = true;
|
||
|
|
title = 'Flying Heroes (pure pipe)';
|
||
|
|
|
||
|
|
// #docregion v1
|
||
|
|
constructor() { this.reset(); }
|
||
|
|
|
||
|
|
addHero(name:string) {
|
||
|
|
name = name.trim();
|
||
|
|
if (!name) { return; }
|
||
|
|
let hero = {name, canFly: this.canFly};
|
||
|
|
// #enddocregion v1
|
||
|
|
if (this.mutate) {
|
||
|
|
// Pure pipe won't update display because heroes array reference is unchanged
|
||
|
|
// Impure pipe will display
|
||
|
|
// #docregion v1
|
||
|
|
// #docregion push
|
||
|
|
this.heroes.push(hero)
|
||
|
|
// #enddocregion push
|
||
|
|
// #enddocregion v1
|
||
|
|
} else {
|
||
|
|
// Pipe updates display because heroes array is a new object
|
||
|
|
// #docregion concat
|
||
|
|
this.heroes = this.heroes.concat(hero);
|
||
|
|
// #enddocregion concat
|
||
|
|
}
|
||
|
|
// #docregion v1
|
||
|
|
}
|
||
|
|
|
||
|
|
reset() { this.heroes = HEROES.slice(); }
|
||
|
|
}
|
||
|
|
// #enddocregion v1
|
||
|
|
|
||
|
|
////// Identical except for impure pipe //////
|
||
|
|
// #docregion impure-component
|
||
|
|
@Component({
|
||
|
|
selector: 'flying-heroes-impure',
|
||
|
|
templateUrl: 'app/flying-heroes.component.html',
|
||
|
|
// #enddocregion impure-component
|
||
|
|
styles: ['.flyers, .all {font-style: italic}'],
|
||
|
|
// #docregion impure-component
|
||
|
|
pipes: [FlyingHeroesImpurePipe]
|
||
|
|
})
|
||
|
|
export class FlyingHeroesImpureComponent extends FlyingHeroesComponent {
|
||
|
|
title = 'Flying Heroes (impure pipe)';
|
||
|
|
}
|
||
|
|
// #docregion impure-component
|