Angular
Réactivité

Signal & Effect()

La fonction effect() est un "espion". Elle écoute les signaux. Dès qu'un signal change, elle s'exécute automatiquement pour faire une action secondaire (sauvegarder, changer le titre de la page, logger dans la console, etc.).

Le Compteur Interactif
0
Console du Navigateur
Regardez l'onglet de votre navigateur !

L'effet ne s'affiche pas que dans la console. Il modifie aussi le titre de cette page web (en haut, dans l'onglet de votre navigateur) à chaque fois que vous cliquez !

Le Code Source Complet

effect-example.component.ts
import { Component, signal, effect } from '@angular/core';

@Component({
  selector: 'app-counter-effect',
  template: `
    <button (click)="increment()">+1</button>
    <h1>{{ count() }}</h1>
  `
})
export class CounterComponent {
  count = signal(0);

  constructor() {
    // L'effet "écoute" le signal. Il s'exécute au lancement, puis à chaque changement !
    effect(() => {
      console.log(`Le compteur a changé : {{ this.count() }}`);
      document.title = `Titre : {{ this.count() }}`;
    });
  }

  increment() {
    this.count.update(val => val + 1);
  }
}