AsyncPipe

AsyncPipe является одним из встроенных классов, который в отличие от других pipes уже по умолчанию является impure. AsyncPipe позволяет получить результат асинхронной операции.

AsyncPipe отслеживает объекты Observable и Promise и возвращает полученное из этих объектов значение. При получении значения AsyncPipe сигнализирует компоненту о том, что надо проверить изменения. Если компонент уничтожается, то AsyncPipe автоматически отписывается от объектов Observable и Promise, что дезавуирует возможные утечки памяти.

Используем AsyncPipe в компоненте AppComponent:

import { Component} from "@angular/core";
import {AsyncPipe} from "@angular/common";
import { Observable, interval } from "rxjs";
import { map } from "rxjs/operators";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [AsyncPipe],
    template: `<p>Модель: {{ phone| async }}</p>
               <button (click)="showPhones()">Посмотреть модели</button>`
})
export class AppComponent { 
 
    phones = ["iPhone 15 Pro", "Xiaomi 14 Pro", "Infinix NOTE 30", "Samsung Galaxy A24", "realme C53"];
     
    phone: Observable<string>|undefined;
    constructor() { this.showPhones(); }
   
    showPhones() {
        this.phone = interval(500).pipe(map((i:number)=> this.phones[i]));
    }
}

Здесь с периодичностью в 500 миллисекунд в шаблон компонента передается очередной элемент из массива phones.

Компонент не должен подписываться на асинхронное получение данных, обрабатывать их, а при уничтожении отписываться от получения данных. Всю эту работу делает AsyncPipe.

Поскольку AsyncPipe позволяет легко извлекать данные из результата асинхронных операций, то его очень удобно применять, например, при загрузке данных из сети. Для примера определим следующий проект:

В файле http.service.ts определим сервис, который получает данные с сервера:

import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";
  
@Injectable()
export class HttpService{
  
    constructor(private http: HttpClient){ }
      
    getUsers(){
        return this.http.get("assets/users.json");
    }
}

Для хранения данных в папке src/assets определим файл users.json:

[{
    "name": "Bob",
    "age": 49
},{
    "name": "Tom",
    "age": 39
},{
    "name": "Alice",
    "age": 34
}]

В файле app.component.ts использует сервис:

import { Component, OnInit} from "@angular/core";
import {AsyncPipe} from "@angular/common";
import { HttpClientModule } from "@angular/common/http"; 
import { Observable } from "rxjs";
import { HttpService} from "./http.service";

@Component({
    selector: "my-app",
    standalone: true,
    imports: [HttpClientModule, AsyncPipe],
    template: `<ul>
                @for(user of users | async; track $index){
                    <li>{{user.name}} ({{user.age}})</li>
                } 
                </ul>`,
    providers: [HttpService]
})
export class AppComponent implements OnInit { 
    
    users: Observable<Object>|undefined;;
    constructor(private httpService: HttpService){}
    ngOnInit(){
           
         this.users = this.httpService.getUsers();
    }
}

Опять же загрузка данных запускается в методе ngOnInit(). В шаблоне компонента к полученным данным применяется AsyncPipe:

@for(user of users | async; track $index){

И когда данные будут получены, то они сразу будут отображены на веб-странице: