Réactivité avec les signals • Angular

Dans Angular, vous utilisez des signals pour créer et gérer l'état. Un signal est une enveloppe légère autour d'une valeur.

Utilisez la fonction signal pour créer un signal qui contient un état local :

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

// Create a signal with the `signal` function.
const firstName = signal('Morgan');

// Read a signal value by calling it— signals are functions.
console.log(firstName());

// Change the value of this signal by calling its `set` method with a new value.
firstName.set('Jaime');

// You can also use the `update` method to change the value
// based on the previous value.
firstName.update((name) => name.toUpperCase());

Angular suit l'endroit où les signals sont lus et le moment où ils sont mis à jour. Le framework utilise ces informations pour effectuer du travail supplémentaire, comme mettre à jour le DOM avec le nouvel état. Cette capacité à réagir aux changements de valeur des signals au fil du temps s'appelle la réactivité.

Expressions computed

Un computed est un signal qui produit sa valeur à partir d'autres signals.

import {signal, computed} from '@angular/core';

const firstName = signal('Morgan');
const firstNameCapitalized = computed(() => firstName().toUpperCase());

console.log(firstNameCapitalized()); // MORGAN

Un signal computed est en lecture seule ; il n'a pas de méthode set ni update. À la place, la valeur du signal computed change automatiquement quand l'un des signals qu'il lit change :

import {signal, computed} from '@angular/core';

const firstName = signal('Morgan');
const firstNameCapitalized = computed(() => firstName().toUpperCase());
console.log(firstNameCapitalized()); // MORGAN

firstName.set('Jaime');
console.log(firstNameCapitalized()); // JAIME

Utiliser les signals dans les composants

Utilisez signal et computed dans vos composants pour créer et gérer l'état :

@Component({
  /* ... */
})
export class UserProfile {
  isTrial = signal(false);
  isTrialExpired = signal(false);
  showTrialDuration = computed(() => this.isTrial() && !this.isTrialExpired());

  activateTrial() {
    this.isTrial.set(true);
  }
}

Astuce : Vous voulez en savoir plus sur les Angular Signals ? Consultez le guide approfondi des signals pour tous les détails.

Étape suivante

Maintenant que vous savez déclarer et gérer des données dynamiques, il est temps d'apprendre à utiliser ces données dans les templates.