Angular
RxJS Basics

📌 Les observables

Les observables représentent un flux d'événements. Apprenez à les créer, vous y abonner (subscribe) et vous en désabonner (unsubscribe).

Démonstration Interactive

0 
import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-observable',
  template: `
    <div>Compteur: {{ compteur }}</div>
    <button (click)="sabonner()">Démarrer le compteur</button>
    <button (click)="sedesabonner()">Arrêter le compteur</button>
  `
})
export class RxjsbservableComponent {
  compteur: number = 0;
  subscription: any;

  // Créer un observable
  monObservable = new Observable<number>((observer) => {
    let count = 0;
    const intervalId = setInterval(() => {
      observer.next(count);
      count++;
    }, 1000);

    // Nettoyage quand l'observable est complété ou arrêté
    return () => clearInterval(intervalId);
  });

  // Souscrire à l'observable
  sabonner() {
    if (!this.subscription || this.subscription.closed) {
      this.subscription = this.monObservable.subscribe({
        next: (value) => (this.compteur = value),
        error: (err) => console.error('Erreur:', err),
        complete: () => console.log('Observable complété.'),
      });
    }
  }

  // Se désabonner de l'observable
  sedesabonner() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

  ngOnDestroy() {
    this.sedesabonner();
  }
}

C'est quoi RxJS ?

RxJS permet de faire de la programmation réactive dans Angular.
Il apporte la notion d'Observable et d'operators. Un Observable est un flux d'événements sur lequel on peut s'abonner pour réagir à chaque fois qu'un événement passe.

Les flux des Observable sont, par défaut, fermés. Cela signifie que si on ne s'abonne pas à un Observable, on ne recevra pas les événements.
Créer et lire les données d'un Observable

Il existe beaucoup d'opérateurs pour créer des Observable, interval en est un exemple et émet un nombre dans un intervalle de temps donné. Pour afficher la valeur dans le template, on utilise souvent le pipe async. 

@Component({
  template: `
    <p>Counter: {{ counter$ | async }}</p>
  `
})
export class MyComponent {
  counter$ = interval(1000);
}
Créer une valeur dérivée d'un Observable

Grâce à l'opérateur map, on peut transformer la valeur de l'observable initial avant qu'elle soit émise par le nouvel observable. 

@Component({
  template: `
    <p>Counter: {{ counter$ | async }}</p>
    <p>Double Counter: {{ doubleCounter$ | async }}</p>
  `
})
export class MyComponent {
  counter$ = interval(1000);
  doubleCounter$ = this.counter$.pipe(
    map(value => value * 2)
  );
}