📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Faire fonctionner signal avec RxJS ​

L'interopérabilité RxJS fait référence à la capacité d'intégration entre les signaux d'Angular et la bibliothèque RxJS. Cela signifie que vous pouvez facilement utiliser les fonctionnalités et les opérateurs de RxJS avec les signaux d'Angular, et vice versa.

Voici quelques points importants concernant l'interopérabilité RxJS :

  1. Conversion de signaux en observables : Vous pouvez utiliser la fonction toObservable de @angular/core/rxjs-interop pour convertir un signal en un observable. Cela vous permet d'appliquer des opérations RxJS sur le signal, comme utiliser les opérateurs de transformation de flux, effectuer des filtrages, etc.

  2. Conversion d'observables en signaux : Vous pouvez utiliser la fonction toSignal de @angular/core/rxjs-interop pour convertir un observable en un signal. Cela vous permet de bénéficier des fonctionnalités des signaux, telles que la déclaration de dépendances, la gestion automatique des mises à jour et les effets.

  3. Utilisation des opérateurs RxJS avec les signaux : Une fois que vous avez converti un signal en observable, vous pouvez utiliser tous les opérateurs RxJS pour manipuler les flux de données. Cela inclut des opérateurs tels que map, filter, debounceTime, switchMap, etc. Vous pouvez ainsi effectuer des transformations complexes et des opérations sur les signaux.

  4. Intégration des fonctionnalités avancées de RxJS : L'interopérabilité RxJS vous permet également de tirer parti des fonctionnalités avancées de RxJS, telles que la gestion fine des abonnements avec les opérateurs takeUntil, retry, debounce, etc. Cela facilite la gestion de la durée des abonnements aux signaux et l'annulation des abonnements lorsque cela est nécessaire.

Exemple d'une ToDoList ​

D'après la reprise du code sur la chapite Les signals, computed et effects dans Angular 16+. voici comment vous pouvez utiliser RxJS avec les signaux :

typescript
import { Component } from '@angular/core';
import { signal, toObservable } from '@angular/core/rxjs-interop';
import { AsyncPipe } from '@angular/common';

@Component({
  selector: 'app-todo-list',
  standalone: true,
  imports: [AsyncPipe],
  template: `
    <h2>Ma liste de tâches</h2>

    <ul>
      @for (task of tasks ; track  task.description) {
        {{ task.description }} 
        <button (click)="markTaskAsCompleted(task)">Terminée</button>
      }
    </ul>

    <p>Nombre de tâches terminées : {{ count$ | async }}</p>
  `,
})
export class TodoListComponent {
  tasks = [
    { description: 'Faire les courses', isCompleted: false },
    { description: 'Nettoyer la maison', isCompleted: false },
    { description: 'RĂ©pondre aux e-mails', isCompleted: false },
  ];

  count = signal(0);
  count$ = toObservable(this.count);

  markTaskAsCompleted(task: any) {
    task.isCompleted = true;
    this.count.set(this.count() + 1);
  }
}

Dans cet exemple, nous utilisons la fonction toObservable de @angular/core/rxjs-interop pour convertir le signal count en un observable count$. Cela nous permet d'utiliser l'opérateur pipe et l'async pipe (| async) dans le template pour souscrire automatiquement aux mises à jour du signal et afficher la valeur.

Lorsque markTaskAsCompleted est appelée, nous mettons à jour la propriété isCompleted de la tâche correspondante et nous augmentons la valeur du signal count en utilisant this.count.set(this.count() + 1).

Ainsi, à chaque fois qu'une tâche est marquée comme terminée, le signal count est mis à jour et la valeur est automatiquement reflétée dans le template grâce à l'async pipe.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !