Component Lifecycle

import {
    Component, Input,
    OnChanges, OnInit, DoCheck,
    AfterContentInit, AfterContentChecked,
    AfterViewInit, AfterViewChecked,
    OnDestroy, SimpleChanges,
} from '@angular/core';

@Component({
    selector: 'app-lifecycle-demo',
    standalone: true,
    template: `<p>{{ label }}</p>`,
})
export class LifecycleDemoComponent
    implements OnChanges, OnInit, DoCheck,
        AfterContentInit, AfterContentChecked,
        AfterViewInit, AfterViewChecked,
        OnDestroy {
    @Input() label = '';

    constructor() { console.log('1. constructor'); }
    ngOnChanges(changes: SimpleChanges) { console.log('2. ngOnChanges', changes); }
    ngOnInit() { console.log('3. ngOnInit'); }
    ngDoCheck() { console.log('4. ngDoCheck'); }
    ngAfterContentInit() { console.log('5. ngAfterContentInit'); }
    ngAfterContentChecked() { console.log('6. ngAfterContentChecked'); }
    ngAfterViewInit() { console.log('7. ngAfterViewInit'); }
    ngAfterViewChecked() { console.log('8. ngAfterViewChecked'); }
    ngOnDestroy() { console.log('9. ngOnDestroy'); }
}

import { Component, Input, OnInit, inject } from '@angular/core';
import { UserService } from './user.service';

@Component({
    selector: 'app-user-detail',
    standalone: true,
    template: `<p>{{ user?.name }}</p>`,
})
export class UserDetailComponent implements OnInit {
    @Input() userId!: string;

    private userService = inject(UserService);
    user: { name: string } | null = null;

    constructor() {
        // FALSCH: this.userId ist hier noch undefined.
        console.log(this.userId); // undefined
    }

    ngOnInit() {
        // RICHTIG: Inputs sind jetzt gesetzt.
        this.userService.load(this.userId).subscribe((u) => (this.user = u));
    }
}

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

@Component({
    selector: 'app-filter-panel',
    standalone: true,
    template: `<p>Aktiver Filter: {{ filter }}</p>`,
})
export class FilterPanelComponent implements OnChanges {
    @Input() filter = '';
    @Input() page = 1;

    ngOnChanges(changes: SimpleChanges) {
        if (changes['filter'] && !changes['filter'].firstChange) {
            console.log(
                'Filter geändert:',
                changes['filter'].previousValue,
                '→',
                changes['filter'].currentValue
            );
            // Reset Pagination, sobald Filter wechselt
            this.page = 1;
        }
    }
}

import {
    Component, AfterViewInit, ViewChild, ElementRef, viewChild,
} from '@angular/core';

@Component({
    selector: 'app-modal',
    standalone: true,
    template: `
        <div class="modal" #modal>
            <h2>Titel</h2>
            <button #closeBtn>X</button>
        </div>
    `,
})
export class ModalComponent implements AfterViewInit {
    // Klassisch: erst nach ngAfterViewInit verfügbar.
    @ViewChild('closeBtn') closeBtn!: ElementRef<HTMLButtonElement>;

    // Modern: Signal-Query — auto-tracked, kein Hook nötig.
    modalRef = viewChild<ElementRef<HTMLElement>>('modal');

    ngAfterViewInit() {
        // Klassisch: Fokus auf Schließen-Button setzen.
        this.closeBtn.nativeElement.focus();
    }

    // Modern, Alternative: über effect() reagieren, sobald die Query auflöst.
    // constructor() {
    //     effect(() => this.modalRef()?.nativeElement.focus());
    // }
}

import { Component, OnInit, OnDestroy } from '@angular/core';
import { interval, Subscription } from 'rxjs';

@Component({
    selector: 'app-ticker',
    standalone: true,
    template: `<p>Tick: {{ tick }}</p>`,
})
export class TickerComponent implements OnInit, OnDestroy {
    tick = 0;
    private intervalId?: number;
    private sub?: Subscription;

    ngOnInit() {
        this.intervalId = window.setInterval(() => this.tick++, 1000);
        this.sub = interval(500).subscribe(() => console.log('rx tick'));
    }

    ngOnDestroy() {
        clearInterval(this.intervalId);
        this.sub?.unsubscribe();
    }
}

import { Component, DestroyRef, inject } from '@angular/core';
import { interval } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
    selector: 'app-destroy-ref',
    standalone: true,
    template: `<p>Tick: {{ tick }}</p>`,
})
export class DestroyRefComponent {
    private destroyRef = inject(DestroyRef);
    tick = 0;

    constructor() {
        // 1) Klassisches Cleanup, lokal definiert.
        const id = window.setInterval(() => this.tick++, 1000);
        this.destroyRef.onDestroy(() => clearInterval(id));

        // 2) takeUntilDestroyed — RxJS-Interop ohne ngOnDestroy.
        interval(500)
            .pipe(takeUntilDestroyed(this.destroyRef))
            .subscribe(() => console.log('rx tick'));
    }
}

import { Component, ElementRef, afterNextRender, viewChild } from '@angular/core';

@Component({
    selector: 'app-chart-mount',
    standalone: true,
    template: `<div #host class="chart"></div>`,
})
export class ChartMountComponent {
    host = viewChild<ElementRef<HTMLDivElement>>('host');

    constructor() {
        afterNextRender({
            write: () => {
                // DOM ist gemalt — Drittanbieter-Lib initialisieren.
                const el = this.host()?.nativeElement;
                if (el) initChartLibrary(el);
            },
            read: () => {
                // Maße lesen, ohne danach zu schreiben → kein Re-Layout.
                console.log('Chart-Höhe:', this.host()?.nativeElement.offsetHeight);
            },
        });
    }
}

declare function initChartLibrary(el: HTMLElement): void;

import {
    Component, ElementRef, DestroyRef, inject,
    afterNextRender, signal, input, viewChild,
} from '@angular/core';

@Component({
    selector: 'app-tooltip',
    standalone: true,
    template: `
        <div #panel class="tooltip" [style.top.px]="pos().top" [style.left.px]="pos().left">
            {{ text() }}
        </div>
    `,
})
export class TooltipComponent {
    // Signal-Inputs — verfügbar ab Constructor.
    text = input.required<string>();
    anchor = input.required<HTMLElement>();

    private destroyRef = inject(DestroyRef);
    private panel = viewChild<ElementRef<HTMLElement>>('panel');

    pos = signal({ top: 0, left: 0 });

    constructor() {
        afterNextRender({
            read: () => {
                // DOM ist gemalt: Maße lesen und Position berechnen.
                const a = this.anchor().getBoundingClientRect();
                const p = this.panel()?.nativeElement.getBoundingClientRect();
                if (!p) return;
                this.pos.set({
                    top: a.bottom + 8,
                    left: a.left + a.width / 2 - p.width / 2,
                });
            },
        });

        // Outside-Click → Cleanup über DestroyRef.
        const onClick = (e: MouseEvent) => {
            if (!this.panel()?.nativeElement.contains(e.target as Node)) {
                // Hier z. B. ein closed-Output emittieren.
            }
        };
        document.addEventListener('click', onClick);
        this.destroyRef.onDestroy(() => document.removeEventListener('click', onClick));
    }
}