@let et les nouvelles expressions de template

<!-- @let déclare une variable locale en lecture seule, visible dans le bloc courant et dans ses enfants -->
@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 /> }

<!-- idéal pour les longues expressions utilisées plusieurs fois -->
@let address = order().customer.billing.address;
<p>{{ address.street }}, {{ address.city }}, {{ address.zip }}</p>

<!-- et dans un @for, par élément -->
@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>{{ `Bonjour, ${user().name} ! Vous avez ${count()} messages.` }}</p>
<img [alt]="`Avatar de ${user().name}`" />

<!-- Opérateurs : ** (puissance), in, typeof, void (v20) -->
{{ 2 ** 10 }}
@if ('discount' in product) { ... }
@if (typeof value === 'string') { ... }
<button (click)="void save()">Enregistrer</button>

<!-- Expressions régulières (v21.0) -->
@let valid = /^07[0-9]{8}$/.test(phone());

<!-- Spread dans les tableaux, objets et arguments (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) — la classe doit être exposée depuis le composant -->
@if (error() instanceof HttpErrorResponse) { <p>Erreur HTTP {{ error().status }}</p> }

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

@Component({
  template: `
    @if (error() instanceof HttpErrorResponse) {
      <p>Le serveur a répondu avec {{ error().status }}</p>
    } @else if (error()) {
      <p>Erreur inattendue</p>
    }
  `,
})
export class ErrorView {
  readonly error = input<unknown>();
  // le template ne voit que les membres du composant, donc la classe doit être exposée :
  protected readonly HttpErrorResponse = HttpErrorResponse;
}

<!-- v22 : commentaires dans les balises -->
<button
  // TODO: remplacer par la directive de tooltip
  class="btn"
  /* temporairement désactivé :
  [disabled]="saving()" */
  (click)="save()"
>
  Enregistrer
</button>

<!-- v22 (breaking) : ?. dans les templates renvoie undefined, comme en TypeScript (avant : null) -->
{{ user()?.name }}            <!-- user null → undefined -->

<!-- ✗ les comparaisons strictes avec null changent -->
@if (user()?.name === null) { ... }   <!-- maintenant jamais vrai -->

<!-- ✓ comparez avec == null ou utilisez ?? -->
@if (user()?.name == null) { ... }
{{ user()?.name ?? 'Anonyme' }}

// Les arrow functions et les méthodes dans les templates s’exécutent à CHAQUE Change Detection du composant.
// Pour de grandes listes ou des calculs coûteux, déplacez la logique dans un computed() :

// au lieu de :   @let done = tasks().filter((t) => t.done);
readonly done = computed(() => this.tasks().filter((t) => t.done)); // mémoïsé

// Règle : le template EST l’endroit des expressions simples et locales.
// Logique métier, tris coûteux et tout ce qui est réutilisé → dans la classe (computed) ou une pipe.