Linked Signals

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

interface ProfileDto {
    displayName: string;
    theme: 'light' | 'dark';
    language: 'de' | 'en';
}

@Component({ selector: 'app-profile-form', standalone: true, template: `
    <label>Anzeigename
        <input [value]="displayName()"
            (input)="displayName.set($any($event.target).value)" />
    </label>
    <label>Theme
        <select [value]="theme()"
            (change)="theme.set($any($event.target).value)">
            <option value="light">Hell</option>
            <option value="dark">Dunkel</option>
        </select>
    </label>
    <button (click)="save()">Speichern</button>
` })
export class ProfileFormComponent {
    // Server-State: kommt z. B. aus einem Resource oder HTTP-Service
    serverProfile = signal<ProfileDto>({
        displayName: 'Max',
        theme: 'light',
        language: 'de',
    });

    // Lokaler Edit-State, der bei Server-Update neu seeded wird
    displayName = linkedSignal(() => this.serverProfile().displayName);
    theme = linkedSignal(() => this.serverProfile().theme);

    save() {
        // Sende this.displayName() etc. an den Server
    }
}

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

const userId = signal('u-1');

// Kurzform: linkedSignal(() => computation)
const draftName = linkedSignal(() => `Entwurf von ${userId()}`);

draftName();              // 'Entwurf von u-1'
draftName.set('Mein Name'); // User schreibt
draftName();              // 'Mein Name'

userId.set('u-2');        // Quelle aendert sich
draftName();              // 'Entwurf von u-2' (Reset!)

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

const list = signal<string[]>(['a', 'b', 'c']);

// Object-Form: source + computation mit Zugriff auf prev
const selected = linkedSignal<string[], string>({
    source: () => list(),
    computation: (newList, prev) => {
        // Wenn der vorherige Wert noch in der neuen Liste enthalten ist: behalten
        if (prev && newList.includes(prev.value)) return prev.value;
        return newList[0];
    },
});

selected();         // 'a'
selected.set('b');
list.set(['a', 'b', 'c', 'd']);
selected();         // 'b' (war noch enthalten -> behalten)
list.set(['x', 'y', 'z']);
selected();         // 'x' (war nicht mehr enthalten -> erster Eintrag)

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

interface Page<T> { items: T[]; page: number; total: number; }

const data = signal<Page<string>>({ items: [], page: 1, total: 0 });

// Page-Number bleibt gleich, solange die Total-Anzahl noch genug Seiten hergibt
const currentPage = linkedSignal<Page<string>, number>({
    source: () => data(),
    computation: (newData, prev) => {
        const maxPage = Math.max(1, Math.ceil(newData.total / 20));
        if (prev && prev.value <= maxPage) return prev.value;
        return 1;
    },
});

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

interface Settings { theme: 'light' | 'dark'; lang: 'de' | 'en'; }

const server = signal<Settings>({ theme: 'light', lang: 'de' });

const settings = linkedSignal(
    () => ({ ...server() }),
    { equal: (a, b) => a.theme === b.theme && a.lang === b.lang },
);

// Object-Form: equal als Schluessel im Options-Objekt
const settings2 = linkedSignal({
    source: () => server(),
    computation: s => ({ ...s }),
    equal: (a, b) => a.theme === b.theme && a.lang === b.lang,
});

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

const source = signal({ name: 'Anna', age: 30 });

// 1) computed: Read-only, perfekt fuer reine Ableitungen
const greeting = computed(() => `Hallo ${source().name}`);

// 2) signal + effect: ANTI-PATTERN fuer State-Sync
const draftBad = signal(source().name);
// (war frueher allowSignalWrites: true im Effect-Options)

// 3) linkedSignal: das richtige Werkzeug fuer „Reset bei Source"
const draftGood = linkedSignal(() => source().name);
draftGood.set('Bea');           // User-Override
source.set({ name: 'Carl', age: 31 }); // -> draftGood() ist 'Carl'

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

interface Row { id: string; status: 'open' | 'done' | 'archived'; label: string; }

@Component({ selector: 'app-filterable-table', standalone: true, template: `
    <header>
        <button (click)="loadOpen()">Offene laden</button>
        <button (click)="loadAll()">Alle laden</button>
        <select [value]="filter()" (change)="filter.set($any($event.target).value)">
            <option value="all">Alle</option>
            <option value="open">Offen</option>
            <option value="done">Erledigt</option>
            <option value="archived">Archiviert</option>
        </select>
    </header>
    <ul>
        @for (r of visible(); track r.id) {
            <li>{{ r.label }} <small>({{ r.status }})</small></li>
        } @empty { <li class="muted">Keine Zeilen</li> }
    </ul>
` })
export class FilterableTableComponent {
    rows = signal<Row[]>([]);

    // Smart-Reset: behalte den Filter, wenn er noch zur neuen Daten-Menge passt
    filter = linkedSignal<Row[], 'all' | Row['status']>({
        source: () => this.rows(),
        computation: (newRows, prev) => {
            if (!prev) return 'all';
            if (prev.value === 'all') return 'all';
            const stillExists = newRows.some(r => r.status === prev.value);
            return stillExists ? prev.value : 'all';
        },
    });

    visible = computed(() => {
        const f = this.filter();
        return f === 'all' ? this.rows() : this.rows().filter(r => r.status === f);
    });

    loadOpen() {
        this.rows.set([
            { id: '1', status: 'open', label: 'Aufgabe A' },
            { id: '2', status: 'open', label: 'Aufgabe B' },
        ]);
    }

    loadAll() {
        this.rows.set([
            { id: '1', status: 'open', label: 'Aufgabe A' },
            { id: '3', status: 'done', label: 'Aufgabe C' },
            { id: '4', status: 'archived', label: 'Alt' },
        ]);
    }
}