title: Angular 2 Usage of Http Observable and Pipe
body: <p>I have a service that call a REST endpoint:</p>
  
  <pre><code>import { Task } from './task';
  import { TaskStatus } from './task-status';
  import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  
  @Injectable()
  export class TaskService {
      constructor(private http: Http){
      }
      getTasks() {
          return this.http.get('http://localhost:8080/tasks').map(res =&gt; res.json()).map(rest =&gt; rest._embedded.tasks);
      }
  }
  </code></pre>
  
  <p>The endpoint returns a result like this:</p>
  
  <pre><code>{
    "_embedded": {
      "tasks": [
        {
          "title": "zxc",
          "description": "zxc",
          "status": "New",
          "_links": {
            "self": {
              "href": "http://localhost:8080/tasks/1"
            },
            "task": {
              "href": "http://localhost:8080/tasks/1"
            }
          }
        },
        {
          "title": "asd",
          "description": "qweqwe",
          "status": "New",
          "_links": {
            "self": {
              "href": "http://localhost:8080/tasks/2"
            },
            "task": {
              "href": "http://localhost:8080/tasks/2"
            }
          }
        }
      ]
    },
    "_links": {
      "self": {
        "href": "http://localhost:8080/tasks"
      },
      "profile": {
        "href": "http://localhost:8080/profile/tasks"
      }
    },
    "page": {
      "size": 20,
      "totalElements": 3,
      "totalPages": 1,
      "number": 0
    }
  }
  </code></pre>
  
  <p>I use the service in this component:</p>
  
  <pre><code>@Component({
    selector: 'app-mycomp',
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.css']
  })
  export class MyComponent implements OnInit {
    tasks: Array&lt;Task&gt;;
  
    constructor(private taskService:TaskService) {
      taskService.getTasks()
      .subscribe(tasks =&gt; this.tasks = tasks, 
                  err =&gt; console.error(err), 
                  () =&gt; console.log('done'));
    }
  }
  </code></pre>
  
  <p>And the template looks like this;</p>
  
  <pre><code>&lt;task-details *ngFor="let task of tasks" [task]="task"&gt;&lt;/task-details&gt;
  </code></pre>
  
  <p>This works as expected, but when I try to use a pipe in the template:</p>
  
  <pre><code>&lt;task-details *ngFor="let task of tasks | WithStatus: TaskStatus.New" [task]="task"&gt;&lt;/task-details&gt;
  </code></pre>
  
  <p>I got the error "Cannot read property 'filter' of undefined".</p>
  
  <p>Here is the pipe implementation:</p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  import { TaskStatus } from './task-status';
  
  @Pipe({ name: 'WithStatus', pure: true })
  export class TaskStatusFilter implements PipeTransform{
      transform(value: any, ...args: any[]): any {
          console.log(value);// value is undefined
          return value.filter(item =&gt; item.status == args[0]);
      }
  }
  </code></pre>