Async pipe | Angular

• Async pipe | Angular

Sabemos que no Angular é muito comum o uso de Observables para a manipulação de eventos, chamadas HTTP e muitas outras operações reativas. Sabemos também que para recuperar os valores de um Observable precisamos nos inscrever (subscribe).

O AsyncPipe é com certeza um dos recursos mais poderosos dentro do Angular. Ele realiza justamente essa operação de se inscrever em um Observable diretamente no template. Melhor ainda é que quando o componente for destruído ele irá se desinscrever do Observable automaticamente, evitando assim os temidos vazamentos de memória.

@Component({
  selector: 'app-individual',
  template: `<app-individual-detail [individual]="individual$ | async"></app-individual-detail>`
})
export class IndividualComponent implements OnInit {
  @Input() individualId: number;
  public individual$: Observable<Individual>;
    
  constructor(private individualService: IndividualService) {}
  
  ngOnInit(): void {
    this.individual$ = this.individualService.getById(this.individualId);
  }
}