@let und die neuen Template-Ausdrücke

<!-- @let deklariert eine lokale, schreibgeschützte Variable, sichtbar im aktuellen Block und in dessen Kindern -->
@let user = user$ | async;
@let fullName = user?.firstName + ' ' + user?.lastName;
@let isAdmin = user?.roles?.includes('admin') ?? false;

<h1>{{ fullName }}</h1>
@if (isAdmin) { <app-admin-tools /> }

<!-- ideal für lange Ausdrücke, die mehrfach verwendet werden -->
@let address = order().customer.billing.address;
<p>{{ address.street }}, {{ address.city }}, {{ address.zip }}</p>

<!-- und innerhalb eines @for, pro Element -->
@for (p of products(); track p.id) {
  @let finalPrice = p.discount ? p.price * (1 - p.discount) : p.price;
  <span>{{ finalPrice | currency: 'RON' }}</span>
}

<!-- Template literals (v20) -->
<p>{{ `Hallo, ${user().name}! Du hast ${count()} Nachrichten.` }}</p>
<img [alt]="`Avatar von ${user().name}`" />

<!-- Operatoren: ** (Potenz), in, typeof, void (v20) -->
{{ 2 ** 10 }}
@if ('discount' in product) { ... }
@if (typeof value === 'string') { ... }
<button (click)="void save()">Speichern</button>

<!-- Reguläre Ausdrücke (v21.0) -->
@let valid = /^07[0-9]{8}$/.test(phone());

<!-- Spread in Arrays, Objekten und Argumenten (v21.1) -->
@let all = [...defaults, ...extra()];
<app-chart [options]="{ ...baseOptions, color: accent() }" />
{{ max(...values()) }}

<!-- Arrow functions (v21.2) -->
@let done = tasks().filter((t) => t.done);
<app-list [sortFn]="(a, b) => a.name.localeCompare(b.name)" />

<!-- instanceof (v21.2) — die Klasse muss aus der Komponente bereitgestellt werden -->
@if (error() instanceof HttpErrorResponse) { <p>HTTP-Fehler {{ error().status }}</p> }

import { HttpErrorResponse } from '@angular/common/http';

@Component({
  template: `
    @if (error() instanceof HttpErrorResponse) {
      <p>Der Server hat mit {{ error().status }} geantwortet</p>
    } @else if (error()) {
      <p>Unerwarteter Fehler</p>
    }
  `,
})
export class ErrorView {
  readonly error = input<unknown>();
  // das Template sieht nur die Member der Komponente, also muss die Klasse bereitgestellt werden:
  protected readonly HttpErrorResponse = HttpErrorResponse;
}

<!-- v22: Kommentare innerhalb von Tags -->
<button
  // TODO: durch die Tooltip-Direktive ersetzen
  class="btn"
  /* vorübergehend deaktiviert:
  [disabled]="saving()" */
  (click)="save()"
>
  Speichern
</button>

<!-- v22 (Breaking): ?. in Templates liefert undefined, wie in TypeScript (vorher: null) -->
{{ user()?.name }}            <!-- user null → undefined -->

<!-- ✗ strikte Vergleiche mit null ändern sich -->
@if (user()?.name === null) { ... }   <!-- jetzt nie mehr true -->

<!-- ✓ mit == null vergleichen oder ?? verwenden -->
@if (user()?.name == null) { ... }
{{ user()?.name ?? 'Anonym' }}

// Arrow Functions und Methoden in Templates laufen bei JEDER Change Detection der Komponente.
// Bei großen Listen oder aufwendigen Berechnungen verschiebst du die Logik in ein computed():

// statt:   @let done = tasks().filter((t) => t.done);
readonly done = computed(() => this.tasks().filter((t) => t.done)); // memoisiert

// Regel: Das Template IST der Ort für einfache, lokale Ausdrücke.
// Geschäftslogik, aufwendige Sortierungen und alles Wiederverwendete → in die Klasse (computed) oder eine Pipe.