How to make pipe work asynchronously without always specifying |async in templates in angular 2?

Question

JavaScript

@Pipe({
  name: 'someRand',
  pure: false
})
export class RandomPipe implements PipeTransform {
  constructor(private  cdRef:ChangeDetectorRef) {
  }

  transform(value:string):any {
    return new AsyncPipe(this.cdRef).transform(new Observable<string>(observer=>{
      observer.next('rand1');
      setTimeout(()=>{
        observer.next('[email protected]');
      })
    }));
  }
}

How to force the pipe to output a string inside the timeout, because in such an implementation only synchronous output works - 'rand1'

Answer 1

I think it's possible this way

@Pipe({
  name: 'someRand',
  pure: false
})
export class RandomPipe implements PipeTransform {
  constructor(private  cdRef:ChangeDetectorRef) {}

  pipe: AsyncPipe;
  obs: Observable<string>;

  transform(value:string):any {
    if (!this.pipe) {
      this.pipe = new AsyncPipe(this.cdRef);
      this.obs = new Observable<string>(observer=>{
        observer.next('rand1');
        setTimeout(()=>{
          observer.next('[email protected]');
        }, 600)
      });
    }
  
    return this.pipe.transform(this.obs);
  }
}

600 added just for the sake of asynchrony)