signal() und computed()

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

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

name();                        // Lesen → 'Ana'
name.set('Maria');             // direktes Schreiben
name.update((n) => n.toUpperCase()); // Schreiben auf Basis des alten Werts

const greeting: Signal<string> = computed(() => `Hallo, ${name()}!`);
greeting();                    // 'Hallo, MARIA!'
// greeting.set(...)           ✗ ein computed ist schreibgeschützt

const readonlyName: Signal<string> = name.asReadonly(); // ohne Schreibzugriff freigegeben

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

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

  // ✓ Alles, was sich aus etwas anderem berechnen lässt = 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: dieselbe Array-Referenz → Angular erfährt NICHTS
tags().push('c');
tags.set(tags()); // hilft trotzdem nicht: Object.is(alt, neu) === true

// ✓ Immer eine neue Referenz
tags.update((t) => [...t, 'c']);                    // hinzufügen
tags.update((t) => t.filter((x) => x !== 'a'));     // entfernen
tags.update((t) => t.map((x) => (x === 'b' ? 'B' : x))); // ändern

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;
}

// Standardmäßig: Gleichheit über Object.is (Referenz).
// Mit `equal` entscheidest du, wann zwei Werte „gleich“ sind → keine sinnlosen Benachrichtigungen.
const filters = signal<Filters>(
  { query: '', page: 1 },
  { equal: (a, b) => a.query === b.query && a.page === b.page },
);

filters.set({ query: '', page: 1 }); // neues Objekt, aber „gleich“ → NIEMAND wird benachrichtigt

// Funktioniert auch bei 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(() => {
  // Abhängigkeit: user — der Effect läuft erneut, wenn sich user ändert
  const name = user();

  // Lesen OHNE Abhängigkeit: Eine Änderung des Themes führt den Effect NICHT erneut aus
  const currentTheme = untracked(theme);

  console.log(`[analytics] ${name} hat die Seite geöffnet (Theme: ${currentTheme})`);
});

// untracked akzeptiert auch eine Funktion — praktisch, wenn du Code aufrufst, der intern Signals liest
effect(() => {
  const id = selectedId();
  untracked(() => this.logger.log(`Ausgewählt: ${id}`)); // der Logger darf beliebige Signals lesen
});

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

@Service()
export class CounterStore {
  // Schreiben ist privat: Nur der Store ändert seinen Zustand …
  private readonly _count = signal(0);

  // … und nach außen gibst du nur das Lesen frei.
  readonly count = this._count.asReadonly();
  readonly isZero = computed(() => this._count() === 0);

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

// ERSTELLEN
const a = signal(0);                       // WritableSignal<number>
const b = signal<User | null>(null);       // expliziter Typ, wenn du mit null startest
const c = computed(() => a() * 2);         // Signal<number>, schreibgeschützt, lazy, memoisiert

// LESEN
a();                                       // in TS und im Template: {{ a() }}

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

// SICHERE FREIGABE
readonly value = this._value.asReadonly();

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

// LESEN OHNE ABHÄNGIGKEIT
untracked(a);  untracked(() => a() + b());

// PRÜFUNGEN
isSignal(x);  isWritableSignal(x);