Model Signal (Two-Way)

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

@Component({
    selector: 'app-counter',
    standalone: true,
    template: `
        <button (click)="count.update(c => c + 1)">
            Count: {{ count() }}
        </button>
    `
})
export class CounterComponent {
    // Ein einziges Statement liefert:
    //   - Input  "count"
    //   - Output "countChange"
    //   - WritableSignal-Schnittstelle für den Component-Author
    count = model(0);
}

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-legacy-counter',
    standalone: true,
    template: `
        <button (click)="add()">Count: {{ value }}</button>
    `
})
export class LegacyCounterComponent {
    // 1. Eingehender Wert
    @Input() value = 0;

    // 2. Ausgehender Change-Event — Name MUSS exakt "valueChange" sein
    @Output() valueChange = new EventEmitter<number>();

    add() {
        // Lokal ändern UND nach oben emittieren — beide Schritte manuell
        this.value = this.value + 1;
        this.valueChange.emit(this.value);
    }
}

<!-- Banana-Box ist nur Syntax-Zucker für: -->
<app-legacy-counter [(value)]="myValue" />

<!-- ... das hier: -->
<app-legacy-counter
    [value]="myValue"
    (valueChange)="myValue = $event" />

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

@Component({
    selector: 'app-modern-counter',
    standalone: true,
    template: `
        <button (click)="add()">Count: {{ value() }}</button>
    `
})
export class ModernCounterComponent {
    // Input + Output + Writable in einem Statement
    value = model(0);

    add() {
        // .update() schreibt UND emittiert valueChange — automatisch
        this.value.update(v => v + 1);
    }
}

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

export class MyComponent {
    // 1. MIT Default-Wert — Typ wird inferiert (number)
    count = model(0);

    // 2. OHNE Default — explizit typisiert, Initial-Wert ist undefined
    //    Resultat: ModelSignal<string | undefined>
    label = model<string>();

    // 3. REQUIRED — kein Default erlaubt, Binding ist Pflicht
    user = model.required<{ id: string; name: string }>();
}

export class MyComponent {
    count = model(0);

    inc() {
        // Lesen — wie jedes Signal
        const current = this.count();

        // Wert ersetzen
        this.count.set(current + 1);

        // Wert transformieren — bevorzugt bei abhängigen Updates
        this.count.update(v => v + 1);

        // .asReadonly() ist NICHT auf ModelSignal verfügbar —
        // dafür gibt es input() (read-only). model() ist immer writable.
    }
}

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

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

@Component({
    selector: 'app-edit-user',
    standalone: true,
    template: `
        <input
            [value]="user().name"
            (input)="rename($any($event.target).value)" />
    `
})
export class EditUserComponent {
    // Kein Default — der Parent MUSS [(user)] oder [user] binden
    user = model.required<User>();

    rename(newName: string) {
        this.user.update(u => ({ ...u, name: newName }));
    }
}

<!-- 1. Banana-in-a-Box (kompakt) -->
<app-modern-counter [(value)]="parentCount" />

<!-- 2. Explizit zerlegt (semantisch identisch) -->
<app-modern-counter
    [value]="parentCount"
    (valueChange)="parentCount = $event" />

<!-- 3. Wenn parentCount selbst ein Signal ist -->
<app-modern-counter
    [value]="parentCount()"
    (valueChange)="parentCount.set($event)" />

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

@Component({
    selector: 'app-toggle',
    standalone: true,
    template: `
        <button
            type="button"
            role="switch"
            [attr.aria-checked]="checked()"
            [class.is-on]="checked()"
            (click)="toggle()">
            {{ checked() ? 'An' : 'Aus' }}
        </button>
    `,
    styles: `
        button { padding: .5rem 1rem; border-radius: 999px; }
        button.is-on { background: #2ecc71; color: white; }
    `
})
export class ToggleComponent {
    checked = model(false);

    toggle() {
        this.checked.update(v => !v);
    }
}

import { Component, signal } from '@angular/core';
import { ToggleComponent } from './toggle.component';

@Component({
    selector: 'app-toggle-demo',
    standalone: true,
    imports: [ToggleComponent],
    template: `
        <app-toggle [(checked)]="darkMode" />
        <p>Dark Mode ist {{ darkMode() ? 'aktiv' : 'inaktiv' }}.</p>
    `
})
export class ToggleDemoComponent {
    // Signal im Parent — bei Banana-Box geht das nur mit Property,
    // also packen wir den Wert in eine simple Property:
    darkMode = signal(false);
}

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

@Component({
    selector: 'app-number-input',
    standalone: true,
    template: `
        <div class="num-input">
            <button (click)="dec()" [disabled]="atMin()">−</button>
            <span>{{ value() }}</span>
            <button (click)="inc()" [disabled]="atMax()">+</button>
        </div>
    `
})
export class NumberInputComponent {
    // Two-Way: Wert geht beide Wege
    value = model(0);

    // One-Way: Grenzen kommen nur vom Parent
    min = input(0);
    max = input(100);

    // Abgeleitete Disabled-States
    atMin = computed(() => this.value() <= this.min());
    atMax = computed(() => this.value() >= this.max());

    inc() {
        if (!this.atMax()) this.value.update(v => v + 1);
    }
    dec() {
        if (!this.atMin()) this.value.update(v => v - 1);
    }
}

<!-- Two-Way für value, One-Way für die Grenzen -->
<app-number-input
    [(value)]="quantity"
    [min]="1"
    [max]="20" />

<p>Bestellte Menge: {{ quantity }}</p>

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

@Component({
    selector: 'app-slider',
    standalone: true,
    template: `
        <input
            type="range"
            min="0"
            max="100"
            [value]="percent()"
            (input)="onInput($any($event.target).value)" />
        <span>{{ percent() }} %</span>
    `
})
export class SliderComponent {
    // Außen sichtbar: 0..1 (normalisiert)
    value = model(0.5);

    // Intern: 0..100 (Prozent für das native Range-Input)
    percent = computed(() => Math.round(this.value() * 100));

    onInput(raw: string) {
        const n = Number(raw) / 100;
        this.value.set(Math.max(0, Math.min(1, n)));
    }
}

export class TodoListComponent {
    items = model<string[]>([]);

    // FALSCH — Mutation, kein valueChange-Event
    addBad(item: string) {
        this.items().push(item);
    }

    // RICHTIG — neue Reference, valueChange feuert
    addGood(item: string) {
        this.items.update(arr => [...arr, item]);
    }
}

import { Component, model, numberAttribute } from '@angular/core';

@Component({
    selector: 'app-rating',
    standalone: true,
    template: `<span>Rating: {{ stars() }}</span>`
})
export class RatingComponent {
    // Erstes Generic = Schreib-Typ vom Parent (string aus HTML-Attribut)
    // Zweites Generic = interner Typ (number)
    stars = model.required<string, number>({ transform: numberAttribute });
    //  Parent kann <app-rating stars="3" /> schreiben — intern landet 3 als number
}