asyncPipe.ts

asyncPipe.ts

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, } from 'rxjs/operators';

@Component({
  selector: 'app-b',
  template: `<img [src]="user$|async">`,  
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BComponent implements OnInit {

  user$: Observable<string>

  constructor(private http: HttpClient) { }

  ngOnInit(): void {

    this.user$ = this.http.get('https://randomuser.me/api/').pipe(map((res:any):string => {
     return res = res.results[0].picture.medium
    }))
  }
}