Effects

import { Component, signal, effect, inject, Injector, runInInjectionContext } from '@angular/core';

@Component({
    selector: 'app-effect-locations',
    standalone: true,
    template: `<button (click)="laterEffect()">Effect später erstellen</button>`,
})
export class EffectLocationsComponent {
    private injector = inject(Injector);
    count = signal(0);

    // 1) Field-Initializer — geht, weil die Klasse im Injection-Context instanziiert wird.
    private logger = effect(() => console.log('count:', this.count()));

    constructor() {
        // 2) Constructor — klassischer Ort.
        effect(() => document.title = `Count: ${this.count()}`);
    }

    laterEffect() {
        // 3) Ausserhalb — nur über runInInjectionContext oder die injector-Option.
        runInInjectionContext(this.injector, () => {
            effect(() => console.log('späterer Effect:', this.count()));
        });
    }
}

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

@Component({
    selector: 'app-basic-effects',
    standalone: true,
    template: `
        <input [value]="title()" (input)="title.set($any($event.target).value)" />
        <button (click)="counter.update((n) => n + 1)">+1</button>
        <p>{{ counter() }}</p>
    `,
})
export class BasicEffectsComponent {
    counter = signal(0);
    title = signal('Mibeon');
    theme = signal<'light' | 'dark'>('light');

    constructor() {
        // 1) Logging — läuft initial + bei jeder counter-Änderung.
        effect(() => console.log('counter:', this.counter()));

        // 2) DOM-Effect: Browser-Tab-Titel synchron halten.
        effect(() => {
            document.title = `${this.title()} — Counter ${this.counter()}`;
        });

        // 3) Persistenz: Theme in localStorage spiegeln.
        effect(() => {
            localStorage.setItem('theme', this.theme());
        });
    }
}

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

@Component({
    selector: 'app-cleanup',
    standalone: true,
    template: `
        <button (click)="active.set(!active())">
            {{ active() ? 'Stoppen' : 'Starten' }}
        </button>
        <p>Ticks: {{ ticks() }}</p>
    `,
})
export class CleanupComponent {
    active = signal(true);
    ticks = signal(0);

    constructor() {
        effect((onCleanup) => {
            if (!this.active()) return;

            const id = setInterval(() => {
                this.ticks.update((n) => n + 1);
            }, 1000);

            // Wird aufgerufen vor dem nächsten Effect-Run UND beim Destroy.
            onCleanup(() => clearInterval(id));
        });
    }
}

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

@Component({
    selector: 'app-idle',
    standalone: true,
    template: `<p>Nutzer ist {{ active() ? 'aktiv' : 'idle' }}</p>`,
})
export class IdleComponent {
    lastInteraction = signal(Date.now());
    active = signal(true);

    constructor() {
        // Legitimer Use-Case: Idle-Tracker, der einen abgeleiteten Status setzt.
        effect(
            (onCleanup) => {
                const last = this.lastInteraction();
                const id = setTimeout(() => this.active.set(false), 60_000);
                onCleanup(() => clearTimeout(id));
                // Beim ersten Lauf aktiv setzen
                this.active.set(Date.now() - last < 60_000);
            },
            { allowSignalWrites: true }
        );
    }
}

import { Injectable, signal, effect, EffectRef } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class TrackingService {
    private trackingActive = signal(false);
    private effectRef: EffectRef | null = null;

    startTracking(eventStream: () => string) {
        if (this.effectRef) return;

        this.effectRef = effect(() => {
            const event = eventStream();
            if (event) console.log('track:', event);
        });
    }

    stopTracking() {
        this.effectRef?.destroy();
        this.effectRef = null;
    }
}

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

@Component({
    selector: 'app-injector-option',
    standalone: true,
    template: `<button (click)="setupLater()">Effect erst nach Klick</button>`,
})
export class InjectorOptionComponent {
    private injector = inject(Injector);
    value = signal(0);

    async setupLater() {
        // Async-Code: ab hier ist kein automatischer Injection-Context mehr aktiv.
        await new Promise((r) => setTimeout(r, 500));

        // injector-Option umgeht die Pflicht zum Injection-Context.
        effect(() => console.log('value:', this.value()), { injector: this.injector });
    }
}

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

@Component({
    selector: 'app-dashboard',
    standalone: true,
    template: `
        <input
            [value]="username()"
            (input)="username.set($any($event.target).value)"
        />
        <button (click)="toggleAnalytics()">
            Analytics: {{ analyticsRef() ? 'an' : 'aus' }}
        </button>
    `,
})
export class DashboardComponent {
    username = signal('');
    analyticsRef = signal<EffectRef | null>(null);

    constructor() {
        // Logger
        effect(() => console.log('username:', this.username()));

        // Tab-Titel synchron halten
        effect(() => {
            document.title = this.username()
                ? `Hallo, ${this.username()}`
                : 'Mibeon';
        });

        // Persistenz mit Cleanup beim nächsten Lauf (für AbortController-Patterns)
        effect((onCleanup) => {
            const ctrl = new AbortController();
            localStorage.setItem('user', this.username());
            onCleanup(() => ctrl.abort());
        });
    }

    toggleAnalytics() {
        const current = this.analyticsRef();
        if (current) {
            current.destroy();
            this.analyticsRef.set(null);
            return;
        }
        const ref = effect(() => {
            if (this.username()) navigator.sendBeacon('/track', this.username());
        });
        this.analyticsRef.set(ref);
    }
}

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

@Component({ standalone: true, selector: 'app-bad-vs-good', template: '' })
export class BadVsGoodComponent {
    options = signal<string[]>(['a', 'b', 'c']);

    // SCHLECHT: Effect mit allowSignalWrites, um eine Auswahl zu spiegeln
    selected = signal('a');
    constructor() {
        effect(
            () => {
                const opts = this.options();
                if (!opts.includes(this.selected())) this.selected.set(opts[0] ?? '');
            },
            { allowSignalWrites: true }
        );
    }

    // GUT: linkedSignal — beschreibt die Beziehung deklarativ.
    selectedV2 = linkedSignal({
        source: this.options,
        computation: (opts, prev) =>
            prev && opts.includes(prev.value) ? prev.value : opts[0] ?? '',
    });
}