Signal Queries

import { Component, viewChild, effect } from '@angular/core';
import { AlertComponent } from './alert.component';

@Component({
    selector: 'app-dashboard',
    standalone: true,
    imports: [AlertComponent],
    template: `<app-alert />`,
})
export class DashboardComponent {
    // Signal<AlertComponent | undefined>
    alert = viewChild(AlertComponent);

    constructor() {
        effect(() => {
            const cmp = this.alert();
            if (cmp) {
                console.log('Alert ist da:', cmp);
            }
        });
    }
}

import { Component, viewChild, ElementRef, TemplateRef } from '@angular/core';
import { AlertComponent } from './alert.component';

@Component({
    selector: 'app-locators',
    standalone: true,
    imports: [AlertComponent],
    template: `
        <app-alert />
        <input #email type="email" />
        <ng-template #row let-name>
            <p>Hallo, {{ name }}</p>
        </ng-template>
    `,
})
export class LocatorsComponent {
    // 1) Component-Klasse als Locator: Type wird automatisch inferiert
    alert = viewChild(AlertComponent);
    // Signal<AlertComponent | undefined>

    // 2) Template-Reference-String + explizites Generic
    email = viewChild<ElementRef<HTMLInputElement>>('email');
    // Signal<ElementRef<HTMLInputElement> | undefined>

    // 3) Template-Reference auf <ng-template> mit TemplateRef-Type
    row = viewChild<TemplateRef<{ $implicit: string }>>('row');
    // Signal<TemplateRef<...> | undefined>
}

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

@Component({
    selector: 'app-canvas-host',
    standalone: true,
    template: `<canvas #board width="400" height="200"></canvas>`,
})
export class CanvasHostComponent {
    // Signal<ElementRef<HTMLCanvasElement>> — kein undefined!
    board = viewChild.required<ElementRef<HTMLCanvasElement>>('board');

    draw() {
        // Direkter Zugriff ohne Optional-Chaining
        const ctx = this.board().nativeElement.getContext('2d')!;
        ctx.fillRect(10, 10, 80, 40);
    }
}

import { Component, viewChildren, computed, signal } from '@angular/core';
import { ItemComponent } from './item.component';

@Component({
    selector: 'app-dynamic-list',
    standalone: true,
    imports: [ItemComponent],
    template: `
        <button (click)="add()">Add</button>
        <button (click)="remove()">Remove</button>

        @for (id of ids(); track id) {
            <app-item [id]="id" />
        }

        <p>Aktuell: {{ count() }} Items, erstes id = {{ firstId() }}</p>
    `,
})
export class DynamicListComponent {
    ids = signal<number[]>([1, 2, 3]);

    // Signal<readonly ItemComponent[]>
    items = viewChildren(ItemComponent);

    // Reaktive Ableitungen ohne Lifecycle-Hook
    count = computed(() => this.items().length);
    firstId = computed(() => this.items()[0]?.id ?? null);

    add() {
        this.ids.update((arr) => [...arr, arr.length + 1]);
    }
    remove() {
        this.ids.update((arr) => arr.slice(0, -1));
    }
}

import { Component, contentChild, contentChildren } from '@angular/core';
import { PanelComponent } from './panel.component';

@Component({
    selector: 'app-accordion',
    standalone: true,
    template: `
        <div class="accordion">
            <ng-content />
        </div>
        <p>Insgesamt {{ panels().length }} Panel(s)</p>
    `,
})
export class AccordionComponent {
    // Erstes projiziertes Panel — durchsucht ALLE Descendants per Default
    firstPanel = contentChild(PanelComponent);

    // Alle direkten Panels; tiefer geschachtelt nur mit descendants: true
    panels = contentChildren(PanelComponent, { descendants: true });
}

<app-accordion>
    <app-panel title="Eins">…</app-panel>
    <app-panel title="Zwei">…</app-panel>
    <app-panel title="Drei">…</app-panel>
</app-accordion>

import {
    Component,
    viewChild,
    ElementRef,
    ViewContainerRef,
} from '@angular/core';
import { AlertComponent } from './alert.component';

@Component({
    selector: 'app-read-demo',
    standalone: true,
    imports: [AlertComponent],
    template: `
        <app-alert #alert />
        <ng-container #host></ng-container>
    `,
})
export class ReadDemoComponent {
    // Component-Instanz (Default)
    alertCmp = viewChild.required(AlertComponent);

    // Selbe DOM-Stelle, aber als nacktes ElementRef
    alertEl = viewChild.required('alert', { read: ElementRef });

    // ng-container als programmatischer Insertion-Point
    host = viewChild.required('host', { read: ViewContainerRef });

    highlight() {
        (this.alertEl().nativeElement as HTMLElement).classList.add('on');
    }
}

import { Component, viewChildren, computed, ElementRef } from '@angular/core';

@Component({
    selector: 'app-measure',
    standalone: true,
    template: `
        @for (h of [40, 60, 80]; track h) {
            <div #row [style.height.px]="h">Row</div>
        }
        <p>Erste Höhe: {{ firstHeight() ?? 'n/a' }}</p>
        <p>Summe: {{ totalHeight() }}</p>
    `,
})
export class MeasureComponent {
    rows = viewChildren<ElementRef<HTMLDivElement>>('row');

    firstHeight = computed(
        () => this.rows()[0]?.nativeElement.clientHeight ?? null,
    );

    totalHeight = computed(() =>
        this.rows().reduce(
            (sum, r) => sum + r.nativeElement.clientHeight,
            0,
        ),
    );
}

// VORHER: Decorator + ngAfterViewInit
import {
    Component,
    ViewChild,
    ViewChildren,
    QueryList,
    ElementRef,
    AfterViewInit,
} from '@angular/core';
import { ItemComponent } from './item.component';

@Component({
    selector: 'app-old',
    standalone: true,
    imports: [ItemComponent],
    template: `
        <input #email />
        <app-item *ngFor="let i of ids" [id]="i" />
    `,
})
export class OldComponent implements AfterViewInit {
    ids = [1, 2, 3];

    @ViewChild('email') emailEl!: ElementRef<HTMLInputElement>;
    @ViewChildren(ItemComponent) items!: QueryList<ItemComponent>;

    ngAfterViewInit() {
        this.emailEl.nativeElement.focus();
        this.items.changes.subscribe((q: QueryList<ItemComponent>) => {
            console.log('Now', q.length);
        });
        console.log('Initial', this.items.length);
    }
}

// NACHHER: Signal-Queries + effect()
import {
    Component,
    viewChild,
    viewChildren,
    ElementRef,
    effect,
} from '@angular/core';
import { ItemComponent } from './item.component';

@Component({
    selector: 'app-new',
    standalone: true,
    imports: [ItemComponent],
    template: `
        <input #email />
        @for (i of ids; track i) {
            <app-item [id]="i" />
        }
    `,
})
export class NewComponent {
    ids = [1, 2, 3];

    emailEl = viewChild.required<ElementRef<HTMLInputElement>>('email');
    items = viewChildren(ItemComponent);

    constructor() {
        // Auto-Focus, sobald das Input im DOM ist
        effect(() => this.emailEl().nativeElement.focus());

        // Reagiert auf jede Listen-Änderung (Add/Remove/Move)
        effect(() => console.log('Now', this.items().length));
    }
}

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

@Component({
    selector: 'app-tab',
    standalone: true,
    template: `
        <ng-template #content>
            <ng-content />
        </ng-template>
    `,
})
export class TabComponent {
    label = input.required<string>();
    content = viewChild.required<TemplateRef<unknown>>('content');
}

import {
    Component,
    contentChildren,
    signal,
    computed,
} from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { TabComponent } from './tab.component';

@Component({
    selector: 'app-tabs',
    standalone: true,
    imports: [NgTemplateOutlet],
    template: `
        <div class="tabs__bar" role="tablist">
            @for (tab of tabs(); track tab; let i = $index) {
                <button
                    type="button"
                    role="tab"
                    [attr.aria-selected]="i === selectedIndex()"
                    (click)="selectedIndex.set(i)"
                >
                    {{ tab.label() }}
                </button>
            }
        </div>

        <div class="tabs__panel" role="tabpanel">
            @if (currentTab(); as tab) {
                <ng-container [ngTemplateOutlet]="tab.content()" />
            }
        </div>
    `,
})
export class TabsComponent {
    tabs = contentChildren(TabComponent);
    selectedIndex = signal(0);

    currentTab = computed(() => {
        const list = this.tabs();
        const idx = this.selectedIndex();
        return list[idx] ?? list[0] ?? null;
    });
}

<app-tabs>
    <app-tab label="Profil">
        <p>Profil-Daten…</p>
    </app-tab>
    <app-tab label="Einstellungen">
        <p>Einstellungen…</p>
    </app-tab>
    <app-tab label="Verlauf">
        <p>Letzte Aktionen…</p>
    </app-tab>
</app-tabs>

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

@Component({
    selector: 'app-auto-focus',
    standalone: true,
    template: `
        <button (click)="show.set(!show())">{{ show() ? 'Hide' : 'Show' }}</button>
        @if (show()) {
            <input #firstInput placeholder="Auto-fokussiert" />
        }
    `,
})
export class AutoFocusComponent {
    show = signal(false);

    // Optional, weil das Input nur bei show() === true im DOM ist
    firstInput = viewChild<ElementRef<HTMLInputElement>>('firstInput');

    constructor() {
        effect(() => {
            // Liest beide Signals: das Query-Signal UND show()
            const el = this.firstInput()?.nativeElement;
            if (el) {
                // afterNextRender wäre eine Alternative — hier aber ausreichend
                queueMicrotask(() => el.focus());
            }
        });
    }
}

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

@Component({
    selector: 'app-conditional',
    standalone: true,
    template: `
        <button (click)="visible.set(!visible())">Toggle</button>
        @if (visible()) {
            <p #para>Hallo</p>
        }
    `,
})
export class ConditionalComponent {
    visible = signal(true);
    para = viewChild<ElementRef<HTMLParagraphElement>>('para');

    constructor() {
        effect(() => {
            const el = this.para();
            console.log(el ? 'sichtbar:' : 'weg —', el?.nativeElement);
        });
    }
}