DevTools - ClicAndCode

Signals - Convertir un observable en signal

Avancé

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

utilisateur$ = this.userService.getUtilisateur();
utilisateur = toSignal(this.utilisateur$, {initialValue: null});

Signals - Créer un modèle de sortie

Intermédiaire

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

elementClique = output<string>();

onClique(nom: string) {
  this.elementClique.emit(nom);
}

Signals - Créer un signal simple

Facile

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

compteur = signal(0);

Signals - Effet (effect)

Intermédiaire

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

constructor() {
  effect(() => {
    console.log(`Le compteur a changé : ${this.compteur()}`);
  });
}

Signals - Lire la valeur d'un signal

Facile

const valeur = this.compteur(); // Dans le code TypeScript

// Dans le template
<p>Le compteur est à : {{ compteur() }}</p>

Signals - Mettre à jour un signal

Facile

// Remplacer la valeur
this.compteur.set(5);

// Mettre à jour en fonction de la valeur précédente
this.compteur.update(valeurActuelle => valeurActuelle + 1);

Signals - Mettre à jour un signal de type tableau

Intermédiaire

this.items.update(items => [...items, nouvelItem]);

Signals - Signal calculé (computed)

Intermédiaire

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

compteur = signal(5);
double = computed(() => this.compteur() * 2);

Signals - Signal en entrée de composant

Intermédiaire

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

titre = input<string>(); // Optionnel
titreRequis = input.required<string>(); // Requis

Signals - Utiliser un signal avec ngFor

Intermédiaire

items = signal([{id: 1, nom: 'A'}, {id: 2, nom: 'B'}]);

// Dans le template
<li *ngFor="let item of items(); trackBy: trackById">{{ item.nom }}</li>

📚 Cheatsheet

Snippets 10