Lab 12: toSignal()

📖 Ressources

• Documentation Signals
• Guide toSignal()
• RxJS Interop

🚀 Code de Départ

step-12-album-wholesale-v21-pre-control-flow

Continuez depuis le résultat du Lab 12. Si vous repartez à zéro, utilisez step-12-album-wholesale-v21-pre-control-flow comme base et complétez d’abord les Labs 11 et 12.

Dans ce lab, vous allez convertir les observables RxJS en signals en utilisant toSignal(). Vous transformerez les flux observables en signals réactifs, remplacerez les pipes async par des appels de signals dans les templates, et migrerez les BehaviorSubjects vers des signals modifiables.

📝 Instructions

Étape 1: Convertir un Observable en Signal

toSignal() convertit un Observable en Signal:

import { toSignal } from '@angular/core/rxjs-interop';

// Avant: Observable
albums$ = this.albumService.getAlbums();

// Après: Signal
albums = toSignal(this.albumService.getAlbums(), { initialValue: [] });

Changements dans le template:

<!-- Avant: pipe async -->
@for (album of albums$ | async; track album.id) {
  <app-album-card [album]="album"></app-album-card>
}

<!-- Après: appel du signal -->
@for (album of albums(); track album.id) {
  <app-album-card [album]="album"></app-album-card>
}

Étape 2: Convertir un BehaviorSubject en Signal

Remplacez BehaviorSubject par signal():

// Avant: BehaviorSubject
private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
isAuthenticated$ = this.isAuthenticatedSubject.asObservable();

// Après: Signal
private isAuthenticatedSignal = signal<boolean>(false);
isAuthenticated = this.isAuthenticatedSignal.asReadonly();

Mettez à jour les méthodes:

// Avant
this.isAuthenticatedSubject.next(true);

// Après
this.isAuthenticatedSignal.set(true);