Event Binding & Two-Way

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

@Component({
    selector: 'app-contact-form',
    standalone: true,
    template: `
        <form (submit)="onSubmit($event)">
            <input
                type="text"
                [value]="name()"
                (input)="onNameInput($event)"
                placeholder="Name"
            />

            <textarea
                (focus)="trackFocus('message')"
                (blur)="trackBlur('message')"
                (input)="message.set(($event.target as HTMLTextAreaElement).value)"
            >{{ message() }}</textarea>

            <button type="submit" [disabled]="!canSubmit()">Senden</button>
        </form>

        <p>Aktueller Name: {{ name() }}</p>
        <p>Status: {{ status() }}</p>
    `,
})
export class ContactFormComponent {
    name = signal('');
    message = signal('');
    status = signal('idle');

    onNameInput(event: Event): void {
        const input = event.target as HTMLInputElement;
        this.name.set(input.value);
    }

    onSubmit(event: SubmitEvent): void {
        event.preventDefault();
        this.status.set('submitting');
        // ... API-Call
    }

    trackFocus(field: string): void {
        this.status.set(`focus:${field}`);
    }

    trackBlur(field: string): void {
        this.status.set(`blur:${field}`);
    }

    canSubmit(): boolean {
        return this.name().length > 0 && this.message().length > 0;
    }
}

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

@Component({
    selector: 'app-counter',
    standalone: true,
    template: `
        <button (click)="increment()">+</button>
        <span>{{ count() }}</span>
        <button (click)="decrement()">−</button>
    `,
})
export class CounterComponent {
    count = signal(0);

    // Custom-Event mit Payload (number)
    countChanged = output<number>();

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

    decrement(): void {
        this.count.update(c => c - 1);
        this.countChanged.emit(this.count());
    }
}

<!-- $event ist hier vom Typ number (der Payload des Outputs) -->
<app-counter (countChanged)="onCountChanged($event)" />

<!-- Mehrere Events gleichzeitig: jedes mit eigenem Handler -->
<app-counter
    (countChanged)="logChange($event)"
    (mouseenter)="hover.set(true)"
    (mouseleave)="hover.set(false)"
/>

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

@Component({
    selector: 'app-typed-events',
    standalone: true,
    template: `
        <!-- Variante A: Cast im Handler -->
        <input (input)="onInputA($event)" />

        <!-- Variante B: Template-Reference-Variable -->
        <input #search (input)="onInputB(search.value)" />

        <!-- Inline-Cast: kompakt, manchmal lesbarer als ein Method-Call -->
        <input
            (input)="value.set(($event.target as HTMLInputElement).value)"
        />

        <!-- Keyboard-Event mit konkretem Typ -->
        <input (keydown)="onKey($event)" />

        <p>Wert: {{ value() }}</p>
    `,
})
export class TypedEventsComponent {
    value = signal('');

    onInputA(event: Event): void {
        const target = event.target as HTMLInputElement;
        this.value.set(target.value);
    }

    onInputB(value: string): void {
        this.value.set(value);
    }

    onKey(event: KeyboardEvent): void {
        if (event.key === 'Enter') {
            console.log('Enter gedrückt');
        }
    }
}

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

@Component({
    selector: 'app-search-box',
    standalone: true,
    template: `
        <div class="search">
            <input
                #input
                type="search"
                [value]="query()"
                (input)="query.set(input.value)"
                (keyup.enter)="onSubmit()"
                (keyup.escape)="onClear(input)"
                (keydown.control.k)="$event.preventDefault(); input.focus()"
                placeholder="Suchen… (Strg+K zum Fokussieren, Esc zum Leeren)"
            />

            @if (lastSubmitted()) {
                <p>Letzte Suche: {{ lastSubmitted() }}</p>
            }
        </div>
    `,
})
export class SearchBoxComponent {
    query = signal('');
    lastSubmitted = signal<string | null>(null);

    onSubmit(): void {
        if (this.query().length === 0) return;
        this.lastSubmitted.set(this.query());
    }

    onClear(input: HTMLInputElement): void {
        this.query.set('');
        input.value = '';
    }
}

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

@Component({
    selector: 'app-scroll-watcher',
    standalone: true,
    host: {
        // Host-Listener: auf dem Component-Root-Element
        '(scroll)': 'onScroll($event)',
    },
    template: `
        <p>Scroll-Position: {{ scrollY() }}</p>
    `,
})
export class ScrollWatcherComponent {
    scrollY = signal(0);

    onScroll(event: Event): void {
        const target = event.target as HTMLElement;
        this.scrollY.set(target.scrollTop);
    }

    // Globaler Listener auf window
    @HostListener('window:resize', ['$event'])
    onResize(event: UIEvent): void {
        console.log('Resize:', (event.target as Window).innerWidth);
    }

    // Globaler Listener auf document
    @HostListener('document:keydown.escape')
    onGlobalEscape(): void {
        console.log('Escape gedrückt — globaler Handler');
    }
}

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

@Component({
    selector: 'app-toggle-legacy',
    standalone: true,
    template: `
        <button (click)="flip()" [class.on]="value">
            {{ value ? 'AN' : 'AUS' }}
        </button>
    `,
})
export class LegacyToggleComponent {
    // Pflicht: Input + gleichnamiger Output mit Suffix "Change"
    @Input() value = false;
    @Output() valueChange = new EventEmitter<boolean>();

    flip(): void {
        this.value = !this.value;
        this.valueChange.emit(this.value);
    }
}

<!-- Banana-in-a-Box: setzt value UND empfängt Updates -->
<app-toggle-legacy [(value)]="enabled" />

<!-- Äquivalent ausgeschrieben -->
<app-toggle-legacy
    [value]="enabled"
    (valueChange)="enabled = $event"
/>

<p>Aktueller Zustand: {{ enabled }}</p>

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

@Component({
    selector: 'app-toggle',
    standalone: true,
    template: `
        <button (click)="flip()" [class.on]="value()">
            {{ value() ? 'AN' : 'AUS' }}
        </button>
    `,
})
export class ToggleComponent {
    // Ein einziger Aufruf — Angular erzeugt Input + Output automatisch
    value = model<boolean>(false);

    flip(): void {
        // Schreiben emittiert valueChange automatisch
        this.value.update(v => !v);
    }
}

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

@Component({
    selector: 'app-parent',
    standalone: true,
    imports: [ToggleComponent],
    template: `
        <!-- Two-Way auf ein Signal (sehr typisch) -->
        <app-toggle [(value)]="enabled" />

        <!-- Two-Way auf eine normale Property funktioniert auch -->
        <app-toggle [(value)]="plainBool" />

        <p>Aus Sicht des Parents: {{ enabled() }}</p>
    `,
})
export class ParentComponent {
    enabled = signal(false);
    plainBool = false;
}

import { Component, signal } from '@angular/core';
import { FormsModule, NgForm } from '@angular/forms';

@Component({
    selector: 'app-login-form',
    standalone: true,
    imports: [FormsModule],
    template: `
        <form #form="ngForm" (submit)="onSubmit(form)">
            <label>
                E-Mail
                <input
                    type="email"
                    name="email"
                    [(ngModel)]="email"
                    required
                    email
                    #emailField="ngModel"
                />
            </label>
            @if (emailField.invalid && emailField.touched) {
                <small class="error">Bitte gültige E-Mail eingeben.</small>
            }

            <label>
                Passwort
                <input
                    type="password"
                    name="password"
                    [(ngModel)]="password"
                    required
                    minlength="8"
                />
            </label>

            <button type="submit" [disabled]="form.invalid">Anmelden</button>
        </form>

        <pre>{{ debug() }}</pre>
    `,
})
export class LoginFormComponent {
    email = '';
    password = '';

    debug = signal('');

    onSubmit(form: NgForm): void {
        if (form.invalid) return;
        this.debug.set(JSON.stringify(form.value, null, 2));
    }
}