Computed Signals

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

@Component({
    selector: 'app-full-name',
    standalone: true,
    template: `
        <input [value]="firstName()" (input)="firstName.set($any($event.target).value)" />
        <input [value]="lastName()" (input)="lastName.set($any($event.target).value)" />

        <p>Voller Name: {{ fullName() }}</p>
    `,
})
export class FullNameComponent {
    firstName = signal('Max');
    lastName = signal('Mustermann');

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

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

@Component({
    selector: 'app-conditional',
    standalone: true,
    template: `
        <button (click)="showAdvanced.set(!showAdvanced())">
            Modus wechseln (aktuell: {{ showAdvanced() ? 'Advanced' : 'Simple' }})
        </button>
        <p>Wert: {{ value() }}</p>
    `,
})
export class ConditionalComponent {
    showAdvanced = signal(false);
    simpleValue = signal(10);
    advancedValue = signal(99);

    // Wenn showAdvanced() === false, ist advancedValue NICHT in der Dependency-Liste.
    // advancedValue.set(123) löst dann KEIN Re-Compute aus.
    value = computed(() =>
        this.showAdvanced() ? this.advancedValue() : this.simpleValue()
    );
}

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

@Component({
    selector: 'app-glitch-free',
    standalone: true,
    template: `<p>Summe: {{ sum() }}</p>`,
})
export class GlitchFreeComponent {
    a = signal(1);
    b = signal(2);

    sum = computed(() => {
        console.log('compute sum');
        return this.a() + this.b();
    });

    constructor() {
        // Beide Signals werden synchron aktualisiert.
        this.a.set(10);
        this.b.set(20);

        // sum() wird hier zum ersten Mal ausgewertet — und sieht
        // direkt a=10, b=20. Es gibt kein "Zwischenergebnis 12".
        console.log(this.sum()); // 30 — und 'compute sum' loggt nur einmal.
    }
}

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

interface User { id: string; name: string; active: boolean; }

@Component({
    selector: 'app-memo-vergleich',
    standalone: true,
    template: `
        <!-- SCHLECHT: läuft bei JEDEM Change-Detection-Cycle erneut -->
        <p>Aktive (Methode): {{ getActiveCount() }}</p>

        <!-- GUT: läuft nur, wenn sich users() oder threshold() ändern -->
        <p>Aktive (computed): {{ activeCount() }}</p>
    `,
})
export class MemoVergleichComponent {
    users = signal<User[]>([/* ... 10 000 Einträge ... */]);
    threshold = signal(0);

    activeCount = computed(() =>
        this.users().filter((u) => u.active).length
    );

    getActiveCount(): number {
        console.log('Methode lief');
        return this.users().filter((u) => u.active).length;
    }
}

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

interface Item { id: string; label: string; }

const sameOrder = (a: Item[], b: Item[]) =>
    a.length === b.length && a.every((x, i) => x.id === b[i].id);

@Component({
    selector: 'app-custom-eq',
    standalone: true,
    template: `<p>Sortierte: {{ sorted().length }}</p>`,
})
export class CustomEqComponent {
    items = signal<Item[]>([
        { id: 'a', label: 'Alpha' },
        { id: 'b', label: 'Beta' },
    ]);

    // Wenn der neue Output dieselbe ID-Reihenfolge hat,
    // gilt er als unverändert — kein Downstream-Update.
    sorted = computed(
        () => [...this.items()].sort((a, b) => a.id.localeCompare(b.id)),
        { equal: sameOrder }
    );
}

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

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

@Component({
    selector: 'app-cart',
    standalone: true,
    template: `
        <p>Netto: {{ subtotal() | currency }}</p>
        <p>Steuer (19 %): {{ tax() | currency }}</p>
        <p>Gesamt: {{ total() | currency }}</p>
    `,
})
export class CartComponent {
    items = signal<CartItem[]>([
        { id: '1', price: 19.99, qty: 2 },
        { id: '2', price: 9.5, qty: 1 },
    ]);
    taxRate = signal(0.19);

    subtotal = computed(() =>
        this.items().reduce((sum, i) => sum + i.price * i.qty, 0)
    );

    tax = computed(() => this.subtotal() * this.taxRate());

    total = computed(() => this.subtotal() + this.tax());
}

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

interface User { id: string; name: string; email: string; createdAt: Date; }
type SortKey = 'name' | 'createdAt';

@Component({
    selector: 'app-user-list',
    standalone: true,
    template: `
        <input
            [value]="search()"
            (input)="search.set($any($event.target).value)"
            placeholder="Suche…"
        />
        <select
            [value]="sortBy()"
            (change)="sortBy.set($any($event.target).value)"
        >
            <option value="name">Name</option>
            <option value="createdAt">Erstellt</option>
        </select>

        <p>{{ filtered().length }} von {{ users().length }} Treffern</p>
        <ul>
            @for (u of filtered(); track u.id) {
                <li>{{ u.name }} – {{ u.email }}</li>
            } @empty {
                <li class="muted">Keine Treffer</li>
            }
        </ul>
    `,
})
export class UserListComponent {
    users = signal<User[]>([
        { id: '1', name: 'Anna', email: 'anna@example.com', createdAt: new Date('2025-01-12') },
        { id: '2', name: 'Bernd', email: 'bernd@example.com', createdAt: new Date('2024-08-03') },
        { id: '3', name: 'Clara', email: 'clara@example.com', createdAt: new Date('2025-03-21') },
    ]);
    search = signal('');
    sortBy = signal<SortKey>('name');

    filtered = computed(() => {
        const term = this.search().trim().toLowerCase();
        const key = this.sortBy();

        const filtered = term
            ? this.users().filter(
                  (u) =>
                      u.name.toLowerCase().includes(term) ||
                      u.email.toLowerCase().includes(term)
              )
            : this.users();

        return [...filtered].sort((a, b) =>
            key === 'name'
                ? a.name.localeCompare(b.name)
                : a.createdAt.getTime() - b.createdAt.getTime()
        );
    });
}