title: Filter object array with pipe Angular 2
body: <p>I have a </p>
  
  <blockquote>
    <p>class:</p>
  </blockquote>
  
  <pre><code>export class Todo {
      public id: number;
      public name: string;
      public isCompleted: boolean;
      public dateCreated: Date;
      public userName: string;
  }
  </code></pre>
  
  <blockquote>
    <p>A service:</p>
  </blockquote>
  
  <pre><code>getTodos(): Observable &lt; Todo[] &gt; {
      return this.http.get(this.todosUrl)
          .map(this.extractData)
          .catch(this.handleError);
  }
  
  private extractData(res: Response) {
      let body = res.json();
      return body || {};
  }
  </code></pre>
  
  <blockquote>
    <p>In my component:</p>
  </blockquote>
  
  <pre><code>getTodos(){
      this.todoService.getTodos()
        .subscribe(
          todos =&gt; this.todos = todos,
          error =&gt; this.errorMessage = &lt;any&gt;error
        );
  }
  </code></pre>
  
  <blockquote>
    <p>And html file:</p>
  </blockquote>
  
  <pre><code>&lt;div class="ui large selection animated divided list"&gt;
      &lt;a *ngFor="let todo of (todos | todoFilter:false)" class="item"&gt;
          &lt;div class="right floated content"&gt;
              &lt;div class="ui vertical animated negative button" tabindex="0"&gt;
                  &lt;div class="hidden content"&gt;Delete&lt;/div&gt;
                  &lt;div class="visible content"&gt;
                      &lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;i class="minus square outline icon"&gt;&lt;/i&gt;
          &lt;div class="content"&gt;
              &lt;div class="header"&gt;{{todo.name}}&lt;/div&gt;
              &lt;div class="description"&gt;{{todo.dateCreated | date:"MMM-dd-yyyy"}}&lt;/div&gt;
          &lt;/div&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is, when I try to use this pipe to <code>filter</code> the completed todos, I keep getting an error that say Cannot read property <code>filter</code> of <code>undefined</code>. </p>
  
  <p>Did I do something wrong or are there any ways to filter it without using an <code>pipe</code>?</p>
  
  <blockquote>
    <p>My pipe:</p>
  </blockquote>
  
  <pre><code>transform(allTodos: Todo[], args?: boolean){
      if (allTodos === null) {
        return null;
      }
      return allTodos.filter(todo =&gt; todo.isCompleted);
  }
  </code></pre>
  
  <p>Thank you.</p>