*ngIf, *ngFor, *ngSwitch

import { Component, signal } from '@angular/core';
import { NgIf, AsyncPipe } from '@angular/common';
import { Observable, of } from 'rxjs';

interface User { name: string; role: string; }

@Component({
    selector: 'app-ngif-demo',
    standalone: true,
    imports: [NgIf, AsyncPipe],
    template: `
        <!-- Variante 1: Einfaches Rendern -->
        <p *ngIf="loggedIn()">Willkommen zurück.</p>

        <!-- Variante 2: if/else mit ng-template -->
        <div *ngIf="loggedIn(); else guestBlock">
            <button (click)="loggedIn.set(false)">Abmelden</button>
        </div>
        <ng-template #guestBlock>
            <button (click)="loggedIn.set(true)">Anmelden</button>
        </ng-template>

        <!-- Variante 3: then/else explizit -->
        <div *ngIf="loggedIn(); then loggedTpl else guestTpl"></div>
        <ng-template #loggedTpl><p>Eingeloggt</p></ng-template>
        <ng-template #guestTpl><p>Gast</p></ng-template>

        <!-- Variante 4: as-Variable für Async-Pipe -->
        <section *ngIf="user$ | async as user">
            <h2>{{ user.name }}</h2>
            <p>Rolle: {{ user.role }}</p>
        </section>
    `
})
export class NgIfDemoComponent {
    loggedIn = signal(true);
    user$: Observable<User> = of({ name: 'Mia', role: 'Admin' });
}

import { Component, signal } from '@angular/core';
import { NgFor, NgClass } from '@angular/common';

interface User { id: string; name: string; }

@Component({
    selector: 'app-user-list',
    standalone: true,
    imports: [NgFor, NgClass],
    template: `
        <ul>
            <li
                *ngFor="let user of users();
                        let i = index;
                        let first = first;
                        let last = last;
                        let odd = odd;
                        trackBy: trackById"
                [ngClass]="{ first, last, odd }"
            >
                {{ i + 1 }}. {{ user.name }}
                <button (click)="remove(user.id)">Entfernen</button>
            </li>
        </ul>
        <button (click)="add()">User hinzufügen</button>
    `
})
export class UserListComponent {
    users = signal<User[]>([
        { id: 'u1', name: 'Alice' },
        { id: 'u2', name: 'Bob' },
        { id: 'u3', name: 'Charlie' }
    ]);

    // Identitäts-Tracking via stabile ID
    trackById = (_: number, u: User) => u.id;

    add() {
        this.users.update(list => [...list, {
            id: crypto.randomUUID(),
            name: 'Neu ' + (list.length + 1)
        }]);
    }

    remove(id: string) {
        this.users.update(list => list.filter(u => u.id !== id));
    }
}

import { Component, input } from '@angular/core';
import { NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';

type OrderStatus = 'pending' | 'paid' | 'shipped' | 'cancelled';

@Component({
    selector: 'app-status-badge',
    standalone: true,
    imports: [NgSwitch, NgSwitchCase, NgSwitchDefault],
    template: `
        <div [ngSwitch]="status()" class="badge">
            <span *ngSwitchCase="'pending'" class="badge-warn">
                Warten auf Zahlung
            </span>
            <span *ngSwitchCase="'paid'" class="badge-info">
                Bezahlt
            </span>
            <span *ngSwitchCase="'shipped'" class="badge-success">
                Versendet
            </span>
            <span *ngSwitchCase="'cancelled'" class="badge-error">
                Storniert
            </span>
            <span *ngSwitchDefault class="badge-neutral">
                Unbekannt
            </span>
        </div>
    `
})
export class StatusBadgeComponent {
    status = input.required<OrderStatus>();
}

import { Component, signal } from '@angular/core';
import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';

@Component({
    selector: 'app-template-outlet-demo',
    standalone: true,
    imports: [NgFor, NgIf, NgTemplateOutlet],
    template: `
        <!-- ng-container: kein zusätzliches DOM-Element -->
        <ng-container *ngIf="users().length > 0; else emptyTpl">
            <h2>Nutzer</h2>
            <ul>
                <li *ngFor="let u of users()">{{ u }}</li>
            </ul>
        </ng-container>

        <!-- TemplateOutlet mit Context -->
        <ng-template #greetingTpl let-name="name" let-role="role">
            <p>Hallo {{ name }} ({{ role }})</p>
        </ng-template>

        <ng-container
            *ngTemplateOutlet="greetingTpl;
                               context: { name: 'Mia', role: 'Admin' }">
        </ng-container>

        <ng-template #emptyTpl>
            <p>Keine Nutzer vorhanden.</p>
        </ng-template>
    `
})
export class TemplateOutletDemoComponent {
    users = signal(['Alice', 'Bob']);
}

<!-- Du schreibst: -->
<div *ngIf="user; else guestBlock">
    {{ user.name }}
</div>
<ng-template #guestBlock>Gast</ng-template>

<!-- Der Compiler macht daraus: -->
<ng-template [ngIf]="user" [ngIfElse]="guestBlock">
    <div>{{ user.name }}</div>
</ng-template>
<ng-template #guestBlock>Gast</ng-template>

<!-- Microsyntax -->
<li *ngFor="let item of items; let i = index; trackBy: trackById">
    {{ i }}: {{ item.name }}
</li>

<!-- Expandiert zu -->
<ng-template ngFor
             let-item
             [ngForOf]="items"
             let-i="index"
             [ngForTrackBy]="trackById">
    <li>{{ i }}: {{ item.name }}</li>
</ng-template>

import {
    Directive,
    Input,
    TemplateRef,
    ViewContainerRef
} from '@angular/core';

@Directive({
    selector: '[appUnless]',
    standalone: true
})
export class UnlessDirective {
    private hasView = false;

    constructor(
        private tpl: TemplateRef<unknown>,
        private vcr: ViewContainerRef
    ) {}

    @Input() set appUnless(condition: boolean) {
        if (!condition && !this.hasView) {
            this.vcr.createEmbeddedView(this.tpl);
            this.hasView = true;
        } else if (condition && this.hasView) {
            this.vcr.clear();
            this.hasView = false;
        }
    }
}

<p *appUnless="isLoggedIn()">
    Bitte melde dich an, um Inhalte zu sehen.
</p>

ng generate @angular/core:control-flow