# Arrêtons d’utiliser le pipe  `async`, pourquoi ?

Dans vos applications Angular, vous avez certainement l'habitude d'utiliser le pipe `async` pour souscrire à un `Observable` afin de récupérer les données émises. Ce pipe, dans sa particularité permet aussi de détruire cet `Observable` de façon implicite dès que la souscription est complète.

Prenons cet exemple de code :

```xml
<ul>
     <li *ngFor="let number of numbers$ | async">
        {{ number }}
    </li>
</ul>
```

> Que se passera t-il, lorsque la souscription à l'`Observable` retournera une erreur ? Rien ! On ne peut pas signaler à l'utilisateur qu'il y a un problème par exemple 😱  
> *On fait face à un souci d'expérience utilisateur😫*

Lorsque l'`Observable` retourne une erreur, rien ne se passe du côté du pipe `async`. Il n'y a pas un moyen de traiter l'erreur. C'est dérangeant car l'on aimerait quand même afficher un message d'erreur au niveau de notre template afin d'avoir une bonne expérience utilisateur.

> *Pas de panique ! Une solution existe 😁  
> Levons nos verres 🥂 à la directive* `*ngrxLet` *de la bibliothèque* `@ngrx/component`*.*

En effet, la directive `*ngrxLet`, en plus de ce que le pipe `async` permet de faire déjà, récupère les ***trois (03) évènements*** liés à la souscription d'un `Observable` à savoir :

* `next`
    
* `error`
    
* `complete`
    

Examinons ce code :

```xml
<ng-container *ngrxLet="number$ as n; error as e; complete as c">
  <app-number [number]="n" *ngIf="!e && !c">
  </app-number>

  <p *ngIf="e">There is an error: {{ e }}</p>
  <p *ngIf="c">Observable is completed.</p>
</ng-container>
```

* `numbers$` est un `Observable`. Lorsqu'on souscrit à ce dernier au niveau de la ***classe TS***, voici ce à quoi on devrait s'attendre :
    

```typescript
number$.subscribe({
 next: x => console.log(x),
 error: err => console.error(err),
 complete: () => console.log('Observer got a complete notification')
});
```

En comparaison avec le code HTML précédent, on a :

* `number$ as n` =&gt; `next`
    
* `error as e` =&gt; `error`
    
* `complete as c` =&gt; `complete`
    

Pour rajouter cette directive à votre projet, voici comment procéder :

1. Installer le package `@ngrx/component` :
    
    ```plaintext
    ng add @ngrx/component@latest
    ```
    
2. Ajouter le module `LetModule` dans le module de votre composant :
    
    ```typescript
    import { LetModule } from '@ngrx/component';
    
    imports: [
        // ... other imports
        LetModule,
      ],
    ```
    

En somme, pour améliorer l'expérience utilisateur de vos applications tout en écrivant moins de code au niveau de votre ***classe* *TS***, vous savez quoi faire à présent !

> Pour plus d'informations 👉 [NgRx - Let Directive](https://ngrx.io/guide/component/let)