signal() et computed()

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

const name: WritableSignal<string> = signal('Ana');

name();                        // lecture → 'Ana'
name.set('Maria');             // écriture directe
name.update((n) => n.toUpperCase()); // écriture à partir de l’ancienne valeur

const greeting: Signal<string> = computed(() => `Bonjour, ${name()} !`);
greeting();                    // 'Bonjour, MARIA !'
// greeting.set(...)           ✗ un computed est en lecture seule

const readonlyName: Signal<string> = name.asReadonly(); // exposé sans accès en écriture

interface CartItem {
  id: number;
  name: string;
  price: number;
  qty: number;
}

export class Cart {
  protected readonly items = signal<CartItem[]>([]);
  protected readonly filter = signal('');

  // ✓ Tout ce qui peut être calculé à partir d’autre chose = computed()
  protected readonly visible = computed(() =>
    this.items().filter((i) => i.name.toLowerCase().includes(this.filter().toLowerCase())),
  );
  protected readonly subtotal = computed(() =>
    this.items().reduce((sum, i) => sum + i.price * i.qty, 0),
  );
  protected readonly vat = computed(() => Math.round(this.subtotal() * 0.19));
  protected readonly total = computed(() => this.subtotal() + this.vat());
  protected readonly freeShipping = computed(() => this.subtotal() >= 1000);

  protected changeQty(id: number, delta: number): void {
    this.items.update((items) =>
      items.map((i) => (i.id === id ? { ...i, qty: Math.max(0, i.qty + delta) } : i)),
    );
  }
}

const tags = signal(['a', 'b']);

// ✗ Mutation : la même référence de tableau → Angular n’apprend RIEN
tags().push('c');
tags.set(tags()); // ça n’aide toujours pas : Object.is(old, new) === true

// ✓ Toujours une nouvelle référence
tags.update((t) => [...t, 'c']);                    // ajout
tags.update((t) => t.filter((x) => x !== 'a'));     // suppression
tags.update((t) => t.map((x) => (x === 'b' ? 'B' : x))); // modification

const user = signal({ name: 'Ana', address: { city: 'Cluj' } });
// ✗ user().address.city = 'Iași';
// ✓
user.update((u) => ({ ...u, address: { ...u.address, city: 'Iași' } }));

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

interface Filters {
  query: string;
  page: number;
}

// Par défaut : égalité via Object.is (référence).
// Avec `equal`, vous décidez quand deux valeurs sont « les mêmes » → pas de notifications inutiles.
const filters = signal<Filters>(
  { query: '', page: 1 },
  { equal: (a, b) => a.query === b.query && a.page === b.page },
);

filters.set({ query: '', page: 1 }); // nouvel objet, mais « égal » → PERSONNE n’est notifié

// Aussi pour computed :
const ids = computed(() => users().map((u) => u.id), {
  equal: (a, b) => a.length === b.length && a.every((id, i) => id === b[i]),
});

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

const user = signal('Ana');
const theme = signal('dark');

effect(() => {
  // Dépendance : user — l’effect se relance quand user change
  const name = user();

  // Lecture SANS dépendance : changer le thème ne relance PAS l’effect
  const currentTheme = untracked(theme);

  console.log(`[analytics] ${name} a ouvert la page (thème : ${currentTheme})`);
});

// untracked accepte aussi une fonction — utile quand vous appelez du code qui lit des signals en interne
effect(() => {
  const id = selectedId();
  untracked(() => this.logger.log(`Sélectionné : ${id}`)); // le logger peut lire n’importe quel signal
});

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

@Service()
export class CounterStore {
  // L’écriture est privée : seul le store modifie son état…
  private readonly _count = signal(0);

  // …et à l’extérieur vous n’exposez que la lecture.
  readonly count = this._count.asReadonly();
  readonly isZero = computed(() => this._count() === 0);

  increment(): void {
    this._count.update((c) => c + 1);
  }
}

// CRÉATION
const a = signal(0);                       // WritableSignal<number>
const b = signal<User | null>(null);       // type explicite quand on démarre avec null
const c = computed(() => a() * 2);         // Signal<number>, lecture seule, lazy, mémoïsé

// LECTURE
a();                                       // en TS et dans le template : {{ a() }}

// ÉCRITURE
a.set(5);
a.update((v) => v + 1);

// EXPOSITION SÛRE
readonly value = this._value.asReadonly();

// OPTIONS
signal(x, { equal: (p, n) => p.id === n.id, debugName: 'selected' });

// LECTURE SANS DÉPENDANCE
untracked(a);  untracked(() => a() + b());

// VÉRIFICATIONS
isSignal(x);  isWritableSignal(x);