Aller au contenu principal

Lab 06 : Détection de changement OnPush

📖 Ressources​

🚀 Code de départ​

step-5-album-wholesale-v16-post-add-custom-async-validator

Continuez depuis le résultat du Lab 05. Si vous avez besoin d'une copie fraîche, utilisez step-5-album-wholesale-v16-post-add-custom-async-validator comme point de départ et complétez d'abord le Lab 05.

Dans ce lab, vous allez optimiser les performances des composants en implémentant la stratégie de détection de changement OnPush. Vous allez configurer les composants pour utiliser OnPush, travailler avec les observables et le pipe async, et vous assurer que les mises à jour d'état suivent les patterns d'immutabilité.

📝 Instructions​

Étape 1 : Activer OnPush​

Ajoutez ChangeDetectionStrategy.OnPush au composant :

import { ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-album-card',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AlbumCardComponent {
  @Input() album!: Album;
}

Étape 2 : Utiliser les Observables avec le pipe Async​

OnPush fonctionne mieux avec les Observables et le pipe async :

albums$ = this.albumService.getAlbums();
<app-album-card
  *ngFor="let album of albums$ | async"
  [album]="album">
</app-album-card>

Étape 3 : Mettre à jour l'état de manière immuable​

Créez toujours de nouveaux objets/tableaux :

// ✅ Bon : Créer un nouveau tableau
this.albums.next([...currentAlbums, newAlbum]);

// ❌ Mauvais : Muter le tableau existant
currentAlbums.push(newAlbum);
this.albums.next(currentAlbums);