=====AsyncPipe=====

Одним из встроенных классов, который в отличие от других pipes уже по умолчанию представляет тип impure. AsyncPipe позволяет получить результат асинхронной операции.\\
\\
AsyncPipe отслеживает объекты Observable и Promise и возвращает полученное из этих объектов значение. При получении значения AsyncPipe сигнализирует компоненту о том, что надо проверить изменения. Если компонент уничтожается, то AsyncPipe автоматически отписывается от объектов Observable и Promise, что дезавуирует возможные утечки памяти.\\
\\
Используем AsyncPipe:
<code javascript>
import { Component} from '@angular/core';
import { Observable, interval } from 'rxjs';
import { map } from 'rxjs/operators';
        
@Component({
    selector: 'my-app',
    template: `<p>Модель: {{ phone| async }}</p>
               <button (click)="showPhones()">Посмотреть модели</button>`
})
export class AppComponent { 
  
    phones = ["iPhone 7", "LG G 5", "Honor 9", "Idol S4", "Nexus 6P"];
      
    phone: Observable<string>;
    constructor() { this.showPhones(); }
    
    showPhones() {
        this.phone = interval(500).pipe(map((i:number)=> this.phones[i]));
    }
}
</code>
Здесь с периодичностью в 500 миллисекунд в шаблон компонента передается очередной элемент из массива phones.\\
\\
{{ :angular:angular2:8.10.png |}}
\\
Компонент не должен подписываться на асинхронное получение данных, обрабатывать их, а при уничтожении отписываться от получения данных. Всю эту работу делает AsyncPipe.\\
\\
Поскольку AsyncPipe позволяет легко извлекать данные из результата асинхронных операций, то его очень удобно применять, например, при загрузке данных из сети. Для примера определим следующий проект:\\
\\
{{ :angular:angular2:8.12.png |}}\\
В файле **http.service.ts** определим сервис, который получает данные с сервера:

<code javascript>
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');
    }
}
</code>

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

<code javascript>
[{
    "name": "Bob",
    "age": 28
},{
    "name": "Tom",
    "age": 45
},{
    "name": "Alice",
    "age": 32
}]
</code>

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

<code javascript>
import { Component, OnInit} from '@angular/core';
import { HttpService} from './http.service';
import {Observable} from 'rxjs';
    
@Component({
    selector: 'my-app',
    template: `<ul>
                    <li *ngFor="let user of users | async">
                    <p>Имя пользователя: {{user.name}}</p>
                    <p>Возраст пользователя: {{user.age}}</p>
                    </li>
                </ul>`,
    providers: [HttpService]
})
export class AppComponent implements OnInit { 
    
    users: Observable<Object>;
    constructor(private httpService: HttpService){}
    ngOnInit(){
           
         this.users = this.httpService.getUsers();
    }
}
</code>

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

<code javascript>
<li *ngFor="let user of users | async">
</code>

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

{{ :angular:angular2:8.11.png |}}
\\
Ну чтобы загрузка данных из сети сработала, надо добавить в AppModule модуль HttpClientModule:

<code javascript>
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
  
import { HttpClientModule }   from '@angular/common/http';
@NgModule({
    imports:      [ BrowserModule, HttpClientModule ],
    declarations: [ AppComponent],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }
</code>