Angular 2 pipes, using observables correctly, my pipe does not return the poster path

Question

I'm trying to call the service to get an Url poster for all my films (I want to show their poster). I am using Angular2 and have now created a channel that should do the job.

I have this code:

<div class="row small-up-1 medium-up-2 large-up-4">
    <div class="column" *ngFor="let movie of MoviesOnNas">
        <span>{{movie.MovieYear}}</span>
        <img src="{{movie.MovieId | poster}}" class="thumbnail" alt="">
        {{movie.MovieTitle}}
    </div>
</div>

Here you see let movie of MoviesOnNas , it will show all the movies that are in the MoviesOnNas object.

In line:

<img src="{{movie.MovieId | poster}}" class="thumbnail" alt="">

I am trying to use a custom channel that I created. It looks like this.

@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) => {
            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";
    }
}
}

The pipe should return the poster url. The problem is that the code I provided does not work. It will not load the url and will not show the image. In console.log, I see that the URL path actually works if I use it in a browser.

If I do something like this:

if (value) {

    return "http://image.tmdb.org/t/p/w500/bqLlWZJdhrS0knfEJRkquW7L8z2.jpg"
} 

. , ?

- , ?

Answer 1

. .

@Pipe({
  name: 'poster'
})
class PosterPipe {
  apiCall;
  constructor() {
    // simulate http call
    this.apiCall = Observable.create(observer => {
      observer.next("http://lorempixel.com/400/200/sports/");
    });
  }

  transform(value: string) {
    if(value) {
      return this.apiCall.first();
    }

    return Observable.of("../../assets/img/poster.png");


  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <img src="{{MovieId | poster | async}}">
    </div>
  `,
})
export class App {
   MovieId:string;
   constructor() {
    this.MovieId = 'Exists'
   }
}

Plunker