Angular 2 pipe, using observable correctly, my pipe does not return a poster path
<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>