Depuis Angular 16, utilisez plutôt les signaux

Les signaux sont une nouvelle fonctionnalité introduite dans Angular 16 pour faciliter la réactivité. Il est plus simple de stocker un signal dans un service, de l'injecter dans un composant et de réagir aux changements de valeur.

En savoir plus sur les signaux dans l'article ici.

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.

Utiliser async

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

<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 { AsyncPipe } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Observable, map } from 'rxjs';

interface User {
  id: number;
  name: string;
  email: string;
}

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [AsyncPipe],
  template: `
    <ul>
      @for (user of users$ | async ; track user.id) {
        <li>{{ 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')
  }
}

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.

La logique dans le service

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 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.