Angular 2 - Endless loop in async pipe

Question

I`m getting an endless loop when I try to bind a async function like this:

     {{myAsyncFunc(i) | async}}<         


        

Answer 1

If your async/observable requires you to pass a parameter (e.g., you are inside an ngFor loop) perhaps you can create a custom async pipe for that.

@Pipe({
  name: 'customPipe'
})
export class customPipe implements PipeTransform {

  constructor(private someService: SomeService) {}

  /**
   * 
   * @param id 
   */
  transform(id: number): Observable {
    return this.someService.shouldShow(id);
  }

}

And in your template you can call your async pipe as:

{{id | customPipe | async}}