Dynamic Components

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

@Component({
    selector: 'app-banner-card',
    standalone: true,
    template: `<div class="banner">{{ title() }}</div>`,
})
export class BannerCardComponent {
    title = signal('Banner');
}

@Component({
    selector: 'app-image-card',
    standalone: true,
    template: `<figure><img [src]="src()" alt="" /></figure>`,
})
export class ImageCardComponent {
    src = signal('/img/cover.webp');
}

@Component({
    selector: 'app-card-switcher',
    standalone: true,
    imports: [NgComponentOutlet],
    template: `
        <button (click)="toggle()">Variante wechseln</button>

        <ng-container
            *ngComponentOutlet="
                current();
                inputs: { title: 'Hallo Welt', src: '/img/x.webp' }
            "
        />
    `,
})
export class CardSwitcherComponent {
    current = signal<Type<unknown>>(BannerCardComponent);

    toggle() {
        this.current.set(
            this.current() === BannerCardComponent
                ? ImageCardComponent
                : BannerCardComponent
        );
    }
}

import {
    Component,
    ViewContainerRef,
    inject,
    ComponentRef,
    Type,
    signal,
} from '@angular/core';

@Component({
    selector: 'app-greeting',
    standalone: true,
    template: `<p>Hallo, {{ name() }}!</p>`,
})
export class GreetingComponent {
    name = signal('Welt');
}

@Component({
    selector: 'app-dynamic-host',
    standalone: true,
    template: `
        <button (click)="mount()">Mount</button>
        <button (click)="updateName()" [disabled]="!ref">Name ändern</button>
        <button (click)="unmount()" [disabled]="!ref">Unmount</button>
    `,
})
export class DynamicHostComponent {
    private vcr = inject(ViewContainerRef);
    ref: ComponentRef<GreetingComponent> | null = null;

    mount() {
        this.ref?.destroy();
        this.ref = this.vcr.createComponent(GreetingComponent);
        this.ref.setInput('name', 'Anna');
    }

    updateName() {
        this.ref?.setInput('name', 'Bernd');
    }

    unmount() {
        this.ref?.destroy();
        this.ref = null;
    }
}

import {
    Component,
    ViewContainerRef,
    inject,
    output,
    input,
} from '@angular/core';

@Component({
    selector: 'app-counter',
    standalone: true,
    template: `
        <p>{{ label() }}: {{ count }}</p>
        <button (click)="inc()">+</button>
    `,
})
export class CounterComponent {
    label = input<string>('Zähler');
    changed = output<number>();
    count = 0;

    inc() {
        this.count += 1;
        this.changed.emit(this.count);
    }
}

@Component({
    selector: 'app-stage',
    standalone: true,
    template: `<button (click)="open()">Counter starten</button>`,
})
export class StageComponent {
    private vcr = inject(ViewContainerRef);

    open() {
        const ref = this.vcr.createComponent(CounterComponent);

        // 1. Typsicheres setInput (triggert OnPush + ngOnChanges)
        ref.setInput('label', 'Klicks');

        // 2. Output abonnieren
        const sub = ref.instance.changed.subscribe((n) => {
            if (n >= 5) ref.destroy();
        });

        // 3. Cleanup beim destroy
        ref.onDestroy(() => sub.unsubscribe());

        // 4. DOM-Zugriff über location
        ref.location.nativeElement.classList.add('is-dynamic');
    }
}

import {
    createComponent,
    ApplicationRef,
    EnvironmentInjector,
    inject,
    Injectable,
    Type,
    ComponentRef,
} from '@angular/core';

@Injectable({ providedIn: 'root' })
export class PortalService {
    private envInjector = inject(EnvironmentInjector);
    private appRef = inject(ApplicationRef);

    attach<T>(component: Type<T>): ComponentRef<T> {
        const host = document.createElement('div');
        host.classList.add('portal-host');
        document.body.appendChild(host);

        const ref = createComponent(component, {
            environmentInjector: this.envInjector,
            hostElement: host,
        });

        // OHNE diesen Schritt läuft KEINE Change Detection!
        this.appRef.attachView(ref.hostView);

        ref.onDestroy(() => {
            this.appRef.detachView(ref.hostView);
            host.remove();
        });

        return ref;
    }
}

import {
    createComponent,
    ApplicationRef,
    EnvironmentInjector,
    inject,
    Injectable,
    Type,
    ComponentRef,
    signal,
} from '@angular/core';

export interface ModalRef<T = unknown> {
    instance: T;
    close(): void;
    afterClosed: Promise<void>;
}

@Injectable({ providedIn: 'root' })
export class ModalService {
    private envInjector = inject(EnvironmentInjector);
    private appRef = inject(ApplicationRef);
    private openRefs = signal<ComponentRef<unknown>[]>([]);

    open<T>(
        component: Type<T>,
        inputs: Partial<Record<keyof T, unknown>> = {}
    ): ModalRef<T> {
        const host = document.createElement('div');
        host.classList.add('modal-host');
        document.body.appendChild(host);

        const ref = createComponent(component, {
            environmentInjector: this.envInjector,
            hostElement: host,
        });

        for (const [k, v] of Object.entries(inputs)) {
            ref.setInput(k, v);
        }

        this.appRef.attachView(ref.hostView);
        this.openRefs.update((rs) => [...rs, ref]);

        let resolveClose!: () => void;
        const afterClosed = new Promise<void>((r) => (resolveClose = r));

        const close = () => {
            ref.destroy();
            this.appRef.detachView(ref.hostView);
            host.remove();
            this.openRefs.update((rs) => rs.filter((r) => r !== ref));
            resolveClose();
        };

        return { instance: ref.instance, close, afterClosed };
    }

    closeAll() {
        this.openRefs().forEach((r) => r.destroy());
        this.openRefs.set([]);
    }
}

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

@Component({
    selector: 'app-confirm-dialog',
    standalone: true,
    template: `
        <div class="backdrop" (click)="cancelled.emit()"></div>
        <div class="dialog">
            <h2>{{ title() }}</h2>
            <p>{{ message() }}</p>
            <button (click)="cancelled.emit()">Abbrechen</button>
            <button (click)="confirmed.emit()">OK</button>
        </div>
    `,
})
export class ConfirmDialogComponent {
    title = input.required<string>();
    message = input.required<string>();
    confirmed = output<void>();
    cancelled = output<void>();
}

// Aufruf an beliebiger Stelle:
// const ref = modal.open(ConfirmDialogComponent, {
//     title: 'Wirklich löschen?',
//     message: 'Dieser Schritt ist nicht umkehrbar.',
// });
// ref.instance.confirmed.subscribe(() => ref.close());
// ref.instance.cancelled.subscribe(() => ref.close());

import { Component, signal, Type, input, output } from '@angular/core';
import { NgComponentOutlet } from '@angular/common';

// 1. Feld-Components — alle teilen ein gemeinsames Input/Output-Schema
@Component({
    selector: 'app-text-field',
    standalone: true,
    template: `
        <label>
            {{ label() }}
            <input
                [value]="value()"
                (input)="changed.emit(($any($event.target)).value)"
            />
        </label>
    `,
})
export class TextFieldComponent {
    label = input.required<string>();
    value = input<string>('');
    changed = output<string>();
}

@Component({
    selector: 'app-checkbox-field',
    standalone: true,
    template: `
        <label>
            <input
                type="checkbox"
                [checked]="value()"
                (change)="changed.emit(($any($event.target)).checked)"
            />
            {{ label() }}
        </label>
    `,
})
export class CheckboxFieldComponent {
    label = input.required<string>();
    value = input<boolean>(false);
    changed = output<boolean>();
}

// 2. Schema und Mapping
type FieldSchema =
    | { kind: 'text'; name: string; label: string; value: string }
    | { kind: 'checkbox'; name: string; label: string; value: boolean };

const FIELD_REGISTRY: Record<FieldSchema['kind'], Type<unknown>> = {
    text: TextFieldComponent,
    checkbox: CheckboxFieldComponent,
};

// 3. Renderer-Component
@Component({
    selector: 'app-form-renderer',
    standalone: true,
    imports: [NgComponentOutlet],
    template: `
        <form>
            @for (field of schema(); track field.name) {
                <ng-container
                    *ngComponentOutlet="
                        componentFor(field);
                        inputs: { label: field.label, value: field.value }
                    "
                />
            }
        </form>
    `,
})
export class FormRendererComponent {
    schema = signal<FieldSchema[]>([
        { kind: 'text',     name: 'firstName', label: 'Vorname', value: '' },
        { kind: 'text',     name: 'lastName',  label: 'Nachname', value: '' },
        { kind: 'checkbox', name: 'newsletter', label: 'Newsletter', value: true },
    ]);

    componentFor(f: FieldSchema): Type<unknown> {
        return FIELD_REGISTRY[f.kind];
    }
}

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

@Component({
    selector: 'app-lazy-host',
    standalone: true,
    template: `
        <button (click)="openHeavy()" [disabled]="loading()">
            {{ loading() ? 'Lädt …' : 'Schwere Component öffnen' }}
        </button>
    `,
})
export class LazyHostComponent {
    private vcr = inject(ViewContainerRef);
    loading = signal(false);

    async openHeavy() {
        this.loading.set(true);
        try {
            const { HeavyChartComponent } = await import(
                './heavy-chart.component'
            );
            const ref = this.vcr.createComponent(HeavyChartComponent);
            ref.setInput('series', [/* … */]);
        } finally {
            this.loading.set(false);
        }
    }
}