title: Angular 2 pipe, using observable correctly, my pipe does not return a poster path
body: <p>I'm trying to call my service to get a poster Url for all my movies (Want to show the poster of them). I'm using Angular2 and have for now created a pipe that should do the job.</p>
  
  <p>I have this code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row small-up-1 medium-up-2 large-up-4"&gt;
      &lt;div class="column" *ngFor="let movie of MoviesOnNas"&gt;
          &lt;span&gt;{{movie.MovieYear}}&lt;/span&gt;
          &lt;img src="{{movie.MovieId | poster}}" class="thumbnail" alt=""&gt;
          {{movie.MovieTitle}}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here you see the <strong>let movie of MoviesOnNas</strong> , it will show all movies there is in the MoviesOnNas object.</p>
  
  <p>In the line:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img src="{{movie.MovieId | poster}}" class="thumbnail" alt=""&gt;
  </code></pre>
  
  <p>I'm trying to use a custom pipe I have created. It looks like this.</p>
  
  <pre class="lang-js prettyprint-override"><code>@Pipe({ name: 'poster' })
  export class PosterPipe implements PipeTransform {
  
  constructor(public movieService: MovieService) {
  
  }
  
  transform(value: string, args: string[]): any {
      if (value) {
          // Go call api to get poster.
          this.movieService.getMoviePoster(value).subscribe((data) =&gt; {
              console.log("http://image.tmdb.org/t/p/w500" + data);
              var poster = "http://image.tmdb.org/t/p/w500" + data;
              return poster;
          });
      }
      else {
          // Insert could not find movie poster.
          return "../../assets/img/poster.png";
      }
  }
  }
  </code></pre>
  
  <p>The pipe should return the poster url. The problem is that The code I have provided does not work. It won't load the url and show the picture. In the console.log, I can see that the url path is actually working if I use it in the browser.</p>
  
  <p>If I do something like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>if (value) {
  
      return "http://image.tmdb.org/t/p/w500/bqLlWZJdhrS0knfEJRkquW7L8z2.jpg"
  } 
  </code></pre>
  
  <p>Then it shows the picture correctly. So the problem must be the observable subscribe?</p>
  
  <p>Can any see what could be wrong here?</p>