Angular Signals : Guide Complet

Angular Signals sont une nouvelle primitive réactive introduite dans Angular 16+. Ils offrent un moyen plus simple de gérer l'état dans vos composants sans la complexité de RxJS pour les cas simples.

Qu'est-ce qu'un Signal ?

Un signal est un wrapper autour d'une valeur qui notifie les consommateurs intéressés quand cette valeur change. Les signals peuvent contenir n'importe quelle valeur, des primitives aux structures de données complexes.

Créer des Signals

Voici comment créer et utiliser des signals :

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

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Count: {{ count() }}</p>
      <p>Double: {{ doubleCount() }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `
})
export class CounterComponent {
  count = signal(0);
  doubleCount = computed(() => this.count() * 2);

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

Méthodes des Signals

Les signals fournissent trois méthodes principales :

• set(value) - Remplace la valeur actuelle
• update(fn) - Met à jour basé sur la valeur actuelle
• mutate(fn) - Mute la valeur en place (pour objets/tableaux)

const items = signal<string[]>([]);

items.set(['a', 'b', 'c']);

items.update(current => [...current, 'd']);

Signals Calculés

Les signals calculés dérivent leur valeur d'autres signals :

const firstName = signal('John');
const lastName = signal('Doe');

const fullName = computed(() => `${firstName()} ${lastName()}`);

Effects

Les effects exécutent des effets de bord quand les signals changent :

effect(() => {
  console.log('Count changed:', this.count());
});

Bonnes Pratiques

1. Utilisez les signals pour l'état des composants
2. Utilisez computed pour les valeurs dérivées
3. Gardez les effects simples et focalisés
4. Considérez RxJS pour les opérations asynchrones complexes