title: Angular2 auto complete filter *ngFor data
body: <p>I am learning angular 2 pipes and running into problem.  I have an auto complete box that once input selected should filter out the data from my *ngFor that displays a list of cards.  Right now when you start typing the autocomplete works but when the actual category is selected the list of cards in the ngFor does not filter.  What am I missing?</p>
  
  <p>Thanks</p>
  
  <p>So here is my auto complete :</p>
  
  <pre><code>&lt;form class="example-form"&gt;
    &lt;md-form-field class="example-full-width"&gt;
    &lt;input type="text" placeholder="Select a sport" aria-label="Number" mdInput 
       [formControl]="myControl" [mdAutocomplete]="auto"&gt;
      &lt;md-autocomplete #auto="mdAutocomplete"&gt;
      &lt;md-option *ngFor="let option of filteredOptions | matchesSport:option | 
       async" [value]="option"&gt;
        {{ option }}
      &lt;/md-option&gt;
    &lt;/md-autocomplete&gt;
  &lt;/md-form-field&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is my *ngFor displaying a list of md-cards:</p>
  
  <pre><code>  &lt;md-list&gt;      
    &lt;md-list-item *ngFor="let g of games; let i = index | matchesSport:option" (click)="onSelect(g)" [class.active]="i == selectedRow"&gt;
      &lt;md-card tabindex="-1"&gt;
        &lt;md-card-content&gt;
          &lt;p md-line&gt; {{g.Sport}}&lt;span&gt;&lt;i class="material-icons"&gt;accessibility&lt;/i&gt;&lt;/span&gt; &lt;/p&gt;
        &lt;/md-card-content&gt;
        &lt;md-card-actions&gt;
          &lt;button md-button md-raised-button&gt;LIKE&lt;/button&gt;
          &lt;button md-button md-raised-button&gt;SHARE&lt;/button&gt;
        &lt;/md-card-actions&gt;
      &lt;/md-card&gt;
    &lt;/md-list-item&gt;
  &lt;/md-list&gt;
  </code></pre>
  
  <p>And here is my pipe</p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
      name:'matchesSport'
  })
  
   export class MatchesSportPipe implements PipeTransform {
      transform(items: any, category: string): Array&lt;any&gt; {            
      return items.filter(item =&gt; item.Sport === category);
    }
   }
  </code></pre>
  
  <p>And here is my controller :</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core'; 
  import { Game } from './models/game.model';
  import { GameService } from './services/game-service';
  import { FormControl } from '@angular/forms';
  import { Observable } from 'rxjs/Observable';     
  import 'rxjs/add/operator/startWith';
  import 'rxjs/add/operator/map';
  
  export class AppComponent implements OnInit {
    title = 'app';
    games: any[] = [ ];
    statusMessage: string = "Loading games...";
    selectedRow: Object;
    setClickedRow: Function;
    selectedGame: Game;
    myControl: FormControl = new FormControl();
  
    options = [
     'Football',
     'Basketball',
     'Baseball',
     'Lacrosse',
     'Volleyball'
    ];
  
     filteredOptions: Observable&lt;string[]&gt;;
  
     constructor(private _gameService: GameService) {
       this.filteredOptions = this.myControl.valueChanges
       .startWith(null)
       .map(val =&gt; val ? this.filter(val) : this.options.slice());
      }
     filter(val: string): string[] {
       return this.options.filter(option =&gt;
       option.toLowerCase().indexOf(val.toLowerCase()) === 0);
     }
  
     onSelect(game: Game): void {
       this.selectedGame = game;
      }
  
  
     ngOnInit() {
          return this._gameService.getGames()
         .subscribe((gameData) =&gt; this.games = gameData,
         (error) =&gt; {
         this.statusMessage = " something broke"
       });
  
     }
   }
  </code></pre>