title: Angular 4 Pipe Filter
body: <p>I am trying to use a custom pipe to filter my <code>*ngFor</code> loop using an input field with ngModel. With my other custom pipe (sortBy), it works perfectly fine. However, the filter pipe seems to make it that none of the data appears. I'm still learning this, and I tried a few variations to no avail:</p>
  
  <pre><code>-filter: term
  -filter: {{term}}
  -filter: 'term'
  -filter" {{'term'}}
  </code></pre>
  
  <p>So I think the problem may lie elsewhere in the code. If anyone can help I'd really appreciate it.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>HTML Component</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div style="text-align:center"&gt;
    &lt;h1&gt;
      Welcome to {{title}}!!
    &lt;/h1&gt;
  
  &lt;/div&gt;
  &lt;h2&gt;Please choose your favorite song: &lt;/h2&gt;
  &lt;form id="filter"&gt;
      &lt;label&gt;Filter people by name:&lt;/label&gt;
      &lt;input type="text" name="term" [(ngModel)]="term" /&gt;
  &lt;/form&gt;
  
  
  &lt;table class="table"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Title&lt;/th&gt;
          &lt;th&gt;Artist&lt;/th&gt;
          &lt;th&gt;Likes&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr *ngFor="let song of songs | filter:term| sortBy: 'likes'; let i  = index"&gt;
          &lt;td&gt;{{song.title}}&lt;/td&gt;
          &lt;td&gt;{{song.artist}}&lt;/td&gt;
          &lt;td&gt;{{song.likes}} 
  
              &lt;i class="fa fa-heart-o" aria-hidden="true"  *ngIf="song.likes &lt; 1"&gt;&lt;/i&gt;
           &lt;i class="fa fa-heart" aria-hidden="true" *ngIf="song.likes &gt;= 1"&gt;&lt;/i&gt;
               &lt;i class="fa fa-plus" aria-hidden="true" (click)="addLike(i)" &gt;&lt;/i&gt;
              &lt;i class="fa fa-minus" aria-hidden="true" (click)="removeLike(i)" &gt;&lt;/i&gt;
  
            &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p><strong>PIPE</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
      name: 'filter',
      pure: false
  })
  
  export class FilterPipe implements PipeTransform {
      transform(items: any[], args: any[]): any {
          return items.filter(item =&gt; item.id.indexOf(args[0]) !== -1);
      }
  }
  </code></pre>
  
  <p>Module</p>
  
  <pre class="lang-js prettyprint-override"><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  import { SortByPipe } from './sort-by.pipe';
  import { FilterPipe } from './filter.pipe';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { Pipe, PipeTransform } from '@angular/core'; 
  
  
  @NgModule({
    declarations: [
      AppComponent,
      SortByPipe,
     FilterPipe
    ],
    imports: [
      BrowserModule,
      FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>JS COMPONENT</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
  })
  export class AppComponent {
    title = 'Oxcord';
    songs = [
  
    {title: "Song", artist: "Artist", likes: 1},
    {title: "Chanson", artist: "Artiste", likes: 3},
    {title: "ABC", artist: "OneTwoThree", likes: 2},
    {title: "Trash", artist: "Meek Mill", likes: 0}
  
    ];
    addLike(input){
    this.songs[input].likes +=1;
  } 
  removeLike(input){
    this.songs[input].likes -=1;
  } 
  args="Me";
  }
  </code></pre>