Comment utiliser le pipe async ? ​

Le pipe async est un opérateur RxJS qui est utilisé dans les templates Angular pour faciliter la gestion des Observables. L'opérateur async permet de souscrire à un Observable dans un template, de transformer les valeurs émises par l'Observable en valeurs synchronisées utilisables dans le template, et de se désabonner automatiquement lorsque le composant est détruit.

Pensez à importer CommonModule ​

Vous devez importer le module CommonModule dans votre module principal en ajoutant l'instruction suivante à la liste des imports de votre module :

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  // ...
})
export class MyModule { }

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  // ...
})
export class MyModule { }

Utiliser async ​

Voici un exemple simple d'utilisation du pipe async dans un template Angular :

<h1>Compteur : {{ counter$ | async }}</h1>

<h1>Compteur : {{ counter$ | async }}</h1>

Dans cet exemple, le template affiche la valeur actuelle du compteur en utilisant le pipe async. Le pipe async s'abonne à l'Observable counter$ lorsque le template est créé, et se désabonne lorsque le composant est détruit. Lorsque l'Observable émet une nouvelle valeur, le pipe async met à jour la valeur affichée dans le template en conséquence.

Le pipe async est particulièrement utile lorsque l'Observable émet des valeurs asynchrones, comme des données chargées à partir d'une requête HTTP. Dans ce cas, le pipe async permet de gérer de manière transparente les retards dans la réception des données, et de ne pas bloquer le rendu du template en attendant la réception des données. Le pipe async permet également de transformer les valeurs émises par l'Observable en valeurs utilisables dans le template en utilisant des opérateurs RxJS supplémentaires.

Exemple dans la pratique ​

Voici un exemple simple d'utilisation du pipe async dans un template Angular pour afficher une liste d'utilisateurs chargés à partir d'une requête HTTP :

// user-list.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, map } from 'rxjs';

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users$ | async">
        {{ user.name }} ({{ user.email }})
      </li>
    </ul>
  `
})
export class UserListComponent {
  users$: Observable<User[]>;

  constructor(private http: HttpClient) {
    // Récupération de la liste des utilisateurs depuis l'URL https://jsonplaceholder.typicode.com/users
    this.users$ = this.http.get<User[]>('https://jsonplaceholder.typicode.com/users').pipe(
      // Transformation des données reçues en un tableau d'utilisateurs
      map(data => data.map(item => new User(item)))
    );
  }
}

class User {
  constructor(data: any) {
    this.name = data.name;
    this.email = data.email;
  }
}

// user-list.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, map } from 'rxjs';

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users$ | async">
        {{ user.name }} ({{ user.email }})
      </li>
    </ul>
  `
})
export class UserListComponent {
  users$: Observable<User[]>;

  constructor(private http: HttpClient) {
    // Récupération de la liste des utilisateurs depuis l'URL https://jsonplaceholder.typicode.com/users
    this.users$ = this.http.get<User[]>('https://jsonplaceholder.typicode.com/users').pipe(
      // Transformation des données reçues en un tableau d'utilisateurs
      map(data => data.map(item => new User(item)))
    );
  }
}

class User {
  constructor(data: any) {
    this.name = data.name;
    this.email = data.email;
  }
}

Dans cet exemple, le composant UserListComponent affiche une liste d'utilisateurs en utilisant le pipe async dans son template. Le composant récupère la liste des utilisateurs à partir de l'URL https://jsonplaceholder.typicode.com/users en utilisant la méthode http.get() d'Angular. Le résultat de cette requête est un Observable qui émet les données chargées à partir de l'URL lorsqu'elles sont disponibles.

Notez qu'il est préférable de mettre la requête dans un service, mais pour simplifier l'explication, la requête a été mise dans le composant

Le composant utilise l'opérateur RxJS map() pour transformer les données reçues en un tableau d'utilisateurs. L'opérateur map() prend en entrée les données brutes reçues à partir de l'URL, et renvoie un tableau d'objets User qui contiennent les données formatées. Le résultat de cette transformation est un Observable qui émet un tableau d'utilisateurs lorsque les données sont disponibles.

Le composant utilise enfin le pipe async dans son template pour s'abonner à l'Observable de la liste d'utilisateurs. Lorsque l'Observable émet une nouvelle valeur, le pipe async met à jour la valeur affichée dans le template en conséquence, en utilisant la directive *ngFor d'Angular pour itérer sur chaque élément de la liste.