image auteur
Lucas BENTO-VERSACE 5min • 23-02-2022

Angular - Pipe async

Angular - Pipe async

Bienvenue sur CodeWise ! Si vous êtes nouveau ici, vous voudrez sans doute découvrir notre Starter Kit Angular : il contient une roadmap du parcours d'un dev Angular, ainsi qu'un cookbook des commandes les plus utiles et un extrait de formation. Cliquez ici pour le télécharger (c’est gratuit !)

Dans cet article, vous allez découvrir le pipe async d'Angular en détails.

Pourquoi utiliser le pipe async ?

Lorsque vous utilisez les promesses et les observables dans vos composants Angular, vous devez vous souscrire au résultat avec les méthodes then() ou subscribe(). L'appel à ces méthodes permet de lancer l'exécution du traitement asynchrone et d'indiquer comment réagir une fois le traitement terminé.

Or, la plupart du temps, vous souhaitez simplement récupérer la valeur émise par l'observable ou la promesse, pour l'afficher à l'écran.

Angular a créé un raccourci pour ce cas de figure précis : le pipe async. Utilisez-le lorsque vous voulez afficher le résultat d'un traitement asynchrone directement sur le template.

Que fait le pipe async ?

Le pipe async se souscrit à l'objet asynchrone passé en entrée (Observable, Promise, Subject, etc.)

A chaque fois que l'objet asynchrone émet une donnée, elle est envoyée en sortie du pipe.

Ainsi, la donnée se retrouve directement utilisable dans le template, à chaque émission d'une donnée asynchrone.

Utiliser le pipe async

Avec un observable

Dans cette section, on va comparer les 2 méthodes pour récupérer une donnée d'un Observable, et l'afficher dans le template.

Afficher la valeur dans le template (sans async)

Classiquement, vous devez passer une callback au subscribe de l'Observable. Cette callback va récupérer la valeur émise par l'Observable, et la stocker dans un attribut du composant.

1
2
3
4
5
6
7
8
9
export class ObservableComponent {

    result!: string;
  
    constructor() {
        const monObservable = of('Hello World');
        monObservable.subscribe(data => this.result = data);
    }
}
observable.component.ts

Il ne vous reste plus qu'à afficher cet attribut dans le template.

1
2
3
<div *ngIf="result">
    {{ result }}
</div>
observable.component.html
Dans cet exemple, on utilise la fonction of() de rxjs qui permet de créer un observable de manière simplifiée.

Testez ce code, et vous remarquerez que 'Hello World' s'affiche bien sur votre page.

Afficher la valeur dans le template (avec async)

Affichons maintenant la valeur émise par l'observable grâce au pipe async.

1
2
3
4
5
6
7
8
9
export class ObservableComponent {

    monObservable: Observable<string>;
  
    constructor() {
      this.monObservable = of('Hello World');
    }
  
}
observable.component.ts
1
{{ monObservable | async }}
observable.component.html

Vous remarquez que le subscribe() a totalement disparu du code.

L'attribut qui sert à stocker le résultat a disparu lui aussi. Au lieu de ça, on stocke directement l'Observable dans les attributs du composant.

Dans le template, on affiche simplement l'Observable dans une interpolation, en lui appliquant le pipe async. Le pipe va effectuer la souscription pour vous et envoyer les valeurs émises par l'Observable en sortie du pipe.

Tout simplement ! Cela a l'avantage d'être moins verbeux et d'éviter des erreurs.

Avec une promesse

Exemple promise sans pipe async :

1
2
3
4
5
6
7
8
9
10
11
export class PromiseComponent implements OnInit {

    data!: string;

    constructor() {
      const maPromesse = Promise.resolve('Hello World');
      maPromesse.then(res => this.data = res);
    }
  
    ngOnInit(): void {}
}
promise.component.ts
1
{{ data }}
promise.component.html

Maintenant, faisons la même chose avec le pipe async.

1
2
3
4
5
6
7
8
9
10
export class PromiseComponent implements OnInit {

    maPromesse: Promise<string>;
  
    constructor() {
      this.maPromesse = Promise.resolve('Hello World');
    }
  
    ngOnInit(): void {}
}
promise.component.ts
1
{{ maPromesse | async }}
promise.component.html

Avec le pype async, plus besoin d'appeler le .then() !

Avec un Subject ou un BehaviourSubject

Le principe est le même qu'avec un Observable.

1
{{ mySubject | async }}
subject.component.html

Appliquez simplement le pipe async sur l'attribut qui contient le subject, et chaque valeur émise par le subject sera affichée dans le template.

Conclusion

Voilà, c'est tout pour le pipe async !

N’hésitez pas à laisser un commentaire, en espérant que cela vous a plu !

Sources

Téléchargez votre Starter Kit Angular

Starter Kit Angular

En souscrivant vous recevrez :

  • Une roadmap d'un développeur Angular
  • Un cookbook Angular des commandes les plus utiles
  • Un extrait de formation

100% gratuit.

Auteur

image auteur
Lucas BENTO-VERSACE Alternant chez Codewise / Étudiant en développement web lucas.bentoversace@ynov.com
"Alternant chez Codewise, passioné par l'informatique et les technologies depuis mon plus jeune âge. J'ai découvert le monde du web et depuis je ne m'en lasse pas ! Fan de jeux vidéos, de sports et de musiques. "