In Angular 17 possiamo testare, tramite una migrazione, prima della implementazione nel framework, un nuovo modo per scrivere i template creando flussi di controllo, Lazy loading e altro ancora.

Nella realtà dei fatti, di cosa stiamo parlando? Ancora oggi molti sviluppatori devono riguardare le regole di sintassi di *ngIf/else, *ngSwitch o *ngFor/trackby prima di utilizzarli all'interno del codice. Questa difficoltà nel ricordare come scrivere una semplice istruzione di if è stata riconosciuta come un problema da Angular stesso, ed è per questo che il nuovo flusso prevede:

- Una sintassi più simile a JavaScript, quindi più intuitiva.
- Una migliore verifica dei tipi nelle condizioni.
- Implementazione a compile time, che va a ridurre le dimensioni del bundle finale.

Come diventerà quello che conosciamo oggi come *ngIf?

<div *ngIf="someBool; else falseTemplate">
  Il bool è true
</div>
<ng-template #falseTemplate>
  Il bool è false
</ng-template>

Il template al momento è ridotto all'osso per dimostrare la funzionalità: a discrezione di un valore dovremo visualizzare un testo diverso, andiamo a riscriverlo.

@if (someBool) {
  Il bool è true
} @else {
  Il bool è false
}

Da notare come ora l'else sia parte integrante del controllo, e non più considerato come un puntatore ad un template, ciò permette anche di creare, per la prima volta nel framework, un'annidamento di @else if, che ci permetterà di gestire ogni tipologia di condizione.

Anche *ngSwitch vede alcune importanti modifiche atte a semplificarne sia la scrittura che la lettura, proponendo una sintassi molto simile a Javascript/C#:

<div [ngSwitch]="discriminante">
  <admin-dashboard *ngSwitchCase="admin"/>
  <moderator-dashboard *ngSwitchCase="moderator"/>
  <user-dashboard *ngSwitchDefault/>
</div>

@switch (discriminante) {
  @case ('admin') { <admin-dashboard/> }
  @case ('moderator') { <moderator-dashboard/> }
  @default { <user-dashboard/> }
}

Così come *ngIf anche *ngFor subisce un drastico cambiamento, trovando una scrittura compressa che permette di specificare iteratore, proprietà per il tracciamento, ed anche un template nel caso la lista sia vuota

@for (user of users; track user.id) {
  {{ user.name }}
} @empty {
  Nessun utente
}

Attualmente, per poter utilizzare questa sintassi, è necessario eseguire una migrazione tramite Angular-CLI

ng generate @angular/core:control-flow