title: Angular: Pipe doesn't work
body: <p>I've created a pipe that doesn't works fine.
  The code seems to be straightforward and clear, but I don't quite figure out what's wrong.</p>
  
  <p>Any ideas?</p>
  
  <p>My <code>app.module</code>:</p>
  
  <pre><code>import { HeroModule } from "./hero/hero.module";
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule, HeroModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>My <code>hero.module</code>:</p>
  
  <pre><code>import { HeroComponent } from './hero.component';
  import { FlyersPipe } from '../pipes/flyers.pipe';
  
  @NgModule({
    imports: [
      CommonModule
    ],
    declarations: [HeroComponent, FlyersPipe],
    exports: [HeroComponent, FlyersPipe]
  })
  export class HeroModule { }
  </code></pre>
  
  <p>My <code>flyers.pipe.ts</code>:</p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  import { Hero } from '../model/hero';
  
  @Pipe({
    name: 'appflyers'
  })
  export class FlyersPipe implements PipeTransform {
  
    transform(heroes: Array&lt;Hero&gt;, args?: any): any {
      console.info(heroes);
      return heroes.filter(hero =&gt; hero.canFly);
    }
  
  }
  </code></pre>
  
  <p>Lastly, my <code>hero.component.html</code>:</p>
  
  <pre><code>&lt;div *ngFor="let hero of heroes | appflyers"&gt;
      {{hero | json}}
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I'm adding heroes into <code>heroes</code> HeroComponent property using this code:</p>
  
  <pre><code>&lt;input type="text" #box
            (keyup.enter)="addHero(box.value); box.value=''"
            placeholder="hero name"&gt;
    &lt;input type="checkbox" [checked]="canFly" (change)="canFly = !canFly"/&gt;
  </code></pre>
  
  <p><code>hero.component.ts</code>:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Hero } from '../model/hero';
  
  @Component({
    selector: 'app-hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.css']
  })
  export class HeroComponent implements OnInit {
  
    private heroes: Array&lt;Hero&gt; = new Array&lt;Hero&gt;();
    private canFly: boolean = true;
  
    constructor() { }
  
    ngOnInit() {
    }
  
    private addHero(name: string) {
      this.heroes.push(new Hero(name, null, this.canFly));
    }
  
    private reset() { this.heroes = this.heroes.slice(); }
  
  }
  </code></pre>