Change Detection Grundlagen

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

@Component({
    selector: 'app-default-counter',
    standalone: true,
    // Default ist auch ohne explizite Angabe gesetzt.
    // In v21 ist ChangeDetectionStrategy.Eager der neue Alias-Name.
    changeDetection: ChangeDetectionStrategy.Default,
    template: `
        <p>Count: {{ count }}</p>
        <button (click)="count = count + 1">+1</button>
        <p>Render-Tick: {{ tick() }}</p>
    `,
})
export class DefaultCounterComponent {
    count = 0;
    private renders = 0;

    // Wird bei JEDEM CD-Cycle aufgerufen — auch wenn nichts in dieser Component
    // sich geändert hat. Bei Default gibt es keine Skip-Optimierung.
    tick() {
        return ++this.renders;
    }
}

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

@Component({
    selector: 'app-onpush-counter',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `
        <p>Count: {{ count() }}</p>
        <button (click)="inc()">+1</button>
        <p>Render-Tick: {{ tick() }}</p>
    `,
})
export class OnPushCounterComponent {
    count = signal(0);
    private renders = 0;

    inc() {
        this.count.update((n) => n + 1);
    }

    tick() {
        return ++this.renders;
    }
}

import {
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    inject,
} from '@angular/core';

@Component({
    selector: 'app-mark-vs-detect',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `
        <p>Status: {{ status }}</p>
        <button (click)="markPath()">markForCheck</button>
        <button (click)="forceNow()">detectChanges</button>
    `,
})
export class MarkVsDetectComponent {
    private cdr = inject(ChangeDetectorRef);
    status = 'idle';

    markPath() {
        // Aus einer externen Quelle (z. B. WebSocket, RxJS-Subscription außerhalb async-pipe)
        // wird der Status gesetzt. Da OnPush ist, müssen wir markieren.
        this.status = 'updated via markForCheck';
        this.cdr.markForCheck();
        // Re-Render passiert im nächsten CD-Cycle, nicht synchron hier.
    }

    forceNow() {
        this.status = 'updated via detectChanges';
        // Synchron jetzt — der DOM ist nach diesem Aufruf aktualisiert.
        this.cdr.detectChanges();
    }
}

// Konzept-Skizze: Was Zone.js zur Laufzeit ungefähr tut.
// (Nicht der echte Code — nur das Mental Model.)

const originalSetTimeout = window.setTimeout;
window.setTimeout = function patched(fn, delay) {
    return originalSetTimeout(() => {
        try {
            fn();
        } finally {
            // Nach JEDEM Timeout-Callback bekommt Angular Bescheid.
            NgZone.current.runOutsideAngular(() => {});
            ApplicationRef.tick();
        }
    }, delay);
};

// Identisch für: addEventListener, Promise.then, fetch, XMLHttpRequest,
// requestAnimationFrame, MutationObserver, EventSource, WebSocket, ...
// Die Liste ist lang, deshalb der Bundle-Aufschlag.

import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
    providers: [
        provideZonelessChangeDetection(),
        provideRouter(routes),
    ],
};

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

@Component({
    selector: 'app-signals-onpush',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `
        <h3>Score: {{ score() }}</h3>
        <h3>Status: {{ status() }}</h3>
        <button (click)="inc()">+1</button>
    `,
})
export class SignalsOnPushComponent {
    score = signal(0);
    status = computed(() => (this.score() >= 10 ? 'gewonnen' : 'spielt'));

    inc() {
        this.score.update((n) => n + 1);
    }
    // Kein markForCheck nötig, kein Zone.js nötig — der Signal-Read im Template
    // ist die Trigger-Quelle, OnPush ist die richtige Strategie dazu.
}

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

@Component({
    selector: 'app-list',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `
        @for (item of items; track item) {
            <li>{{ item }}</li>
        }
    `,
})
export class ListComponent {
    @Input() items: string[] = [];
}

// Parent:
// SCHLECHT — Mutation, Reference bleibt gleich, OnPush feuert NICHT.
// this.items.push('neu');

// GUT — neue Reference, OnPush sieht den Change.
// this.items = [...this.items, 'neu'];

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

@Component({
    selector: 'app-changed-error',
    standalone: true,
    template: `<p>Status: {{ status() }}</p>`,
})
export class ChangedErrorComponent implements AfterViewInit {
    status = signal('initial');

    ngAfterViewInit() {
        // Wirft im Dev-Mode: ExpressionChangedAfterItHasBeenCheckedError
        // Der CD-Cycle ist vorbei, das Template wurde gerendert,
        // jetzt ändern wir den State noch im selben Tick.
        this.status.set('after view init');

        // FIX: Update auf den nächsten Microtask schieben.
        queueMicrotask(() => this.status.set('after view init'));
    }
}

import {
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    OnDestroy,
    OnInit,
    inject,
} from '@angular/core';

@Component({
    selector: 'app-live-chart',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `<canvas #c></canvas><p>FPS: {{ fps }}</p>`,
})
export class LiveChartComponent implements OnInit, OnDestroy {
    private cdr = inject(ChangeDetectorRef);
    private rafId = 0;
    fps = 0;

    ngOnInit() {
        // Component vom CD-Tree trennen — Angular ignoriert sie.
        this.cdr.detach();

        const loop = () => {
            this.fps = Math.random() * 60;
            // Manuell rendern, wann WIR es wollen, nicht wenn Angular meint.
            this.cdr.detectChanges();
            this.rafId = requestAnimationFrame(loop);
        };
        this.rafId = requestAnimationFrame(loop);
    }

    ngOnDestroy() {
        cancelAnimationFrame(this.rafId);
        // reattach() ist optional, da die Component sowieso zerstört wird.
    }
}

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

// SCHLECHT: Default-CD, Methode im Template, BehaviorSubject ohne async-pipe.
@Component({
    selector: 'app-user-list-legacy',
    standalone: true,
    template: `
        <input (input)="filter$.next($any($event.target).value)" />
        <ul>
            @for (u of filtered(); track u.id) {
                <li>{{ u.name }}</li>
            }
        </ul>
    `,
})
export class UserListLegacyComponent {
    users = [{ id: 1, name: 'Anna' }, { id: 2, name: 'Bert' }];
    filter$ = new BehaviorSubject('');

    // Läuft bei JEDEM CD-Cycle — auch wenn nichts den Filter geändert hat.
    filtered() {
        const q = this.filter$.value.toLowerCase();
        return this.users.filter((u) => u.name.toLowerCase().includes(q));
    }
}

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

// GUT: OnPush, Signals, computed memoisiert die Filter-Berechnung.
@Component({
    selector: 'app-user-list',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `
        <input [value]="filter()" (input)="filter.set($any($event.target).value)" />
        <ul>
            @for (u of filtered(); track u.id) {
                <li>{{ u.name }}</li>
            }
        </ul>
    `,
})
export class UserListComponent {
    users = signal([{ id: 1, name: 'Anna' }, { id: 2, name: 'Bert' }]);
    filter = signal('');

    // Wird NUR neu berechnet, wenn users() oder filter() sich ändern.
    filtered = computed(() => {
        const q = this.filter().toLowerCase();
        return this.users().filter((u) => u.name.toLowerCase().includes(q));
    });
}