Limitations du Pipe Async

Le pipe async dans Angular est couramment utilisé pour gérer les observables, mais il présente des limitations, notamment en termes de gestion des erreurs et de performance. Par exemple, si l’Observable émet une erreur, le pipe async ne permet pas de gérer cette erreur directement dans le template, ce qui peut nuire à l’expérience utilisateur.

<ul> 
  <li *ngFor="let product of products$ | async">  
    {{ product.name }} 
  </li> 
</ul>

La Solution : Directive *ngrxLet

La directive *ngrxLet de @ngrx/component surpasse le pipe async en offrant des fonctionnalités supplémentaires, comme la gestion des événements next, error, et complete directement dans le template. Cela simplifie la logique et améliore la gestion des flux de données.

<ng-container *ngrxLet="products$ as products; error as e; complete as c">
  <app-product [product]="product" *ngIf="!e && !c"></app-product>
  <p *ngIf="e">Erreur : {{ e }}</p>
  <p *ngIf="c">Chargement terminé.</p>
</ng-container>

Installation et Utilisation

Pour utiliser *ngrxLet, installez le package @ngrx/component :

ng add @ngrx/component@latest

Ajoutez ensuite LetDirective à votre composant « Standalone » ou NgModule :

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { ProductService } from './product.service';
import { LetDirective } from '@ngrx/component';
@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  standalone: true,
  imports: [LetDirective]
})
export class ProductListComponent {
  products$: Observable<Product[]>;

  constructor(private productService: ProductService) {
  this.products$ = this.productService.getProducts();
 }
}

Conclusion

La directive *ngrxLet améliore la gestion des Observables en permettant de gérer les erreurs et les complétions de manière plus efficace, offrant ainsi une meilleure expérience utilisateur.

Pour plus d’informations, consultez la documentation officielle 👉 NgRx – Let Directive