Built-in control flow in Angular

Precedentemente abbiamo visto come con le direttive strutturali sia possibile condizionare o ripetere dei blocchi di template. Abbiamo anche accennato che è stata recentemente introdotta una nuova sintassi chiamata built-in control flow (flusso di controllo integrato), che consente di dichiarare blocchi if, switch e for introducendoli con @; ne abbiamo visto un esempio nella sezione sui form, dove abbiamo usato dei blocchi @if per condizionare la presenza dei messaggi d’errore.

Vediamo, dunque, nel dettaglio questi costrutti che sostituiscono con diverse ottimizzazioni le direttive strutturali.

@if in Angular.

Con @if si introduce un blocco condizionale che verrà mostrato se la condizione espressa è veritiera:

@if (error) {
  <p class="error">Something's wrong.</p>
}

È possibile assegnare un alias all’espressione usata come condizione, ad esempio per estrarne il valore trasformato da una pipe:

@if (user$ | async; as user) {
  <p>Name: {{user.name}}</p>
  <p>Surname: {{user.surname}}</p>
}

Qui user$ è una proprietà del compontente di tipo Observable<{ name: string; surname: string }> o Promise<{ name: string; surname: string }>; la variabile user rappresenta il valore corrispondente estratto dalla AsyncPipe.

Il blocco @if può essere associato ad un blocco @else:

@if (loading) {
  <p class="loader">Loading...</p>
} @else {
  <section class="content">
    Here's your content.
  </section>
}

o ad un numero illimitato di blocchi @else if seguiti da un eventuale blocco @else finale:

@if (status === 'loading') {
  <p class="loader">Loading...</p>
} @else if (status === 'error') {
  <p class="error">Something went wrong.</p>
} @else {
  <section class="content">
    Here's your content.
  </section>
}

@switch in Angular.

Nei casi in cui si debba usare un numero multiplo di @else if sulla stessa variabile, è preferibile utilizzare il blocco @switch, la cui sintassi è simile allo switch statement in linguaggio JavaScript:

@switch (status) {
  @case ('loading') {
    <p class="loading">Loading...</p>
  }
  @case ('error') {
    <p class="error">Error!</p>
  }
  @case ('success') {
    <section class="content">
      Here's your content.
    </section>
  }
  @default {
    <p class="bug">State management is bugged.</p>
  }
}

@for in Angular.

Come @if e @switch, anche @for è fortemente ispirato alla sintassi JavaScript  for-of:

@for (num of [1, 2, 3]; track num) {
  <p>{{num}}</p>
}

Accanto alla canonica formula variable_name of array abbiamo la keyword track seguita dall’espressione usata per distinguere gli elementi dell’array; nell’esempio usiamo il numero stesso, ma possiamo anche usare un id se stiamo ciclando su un array di oggetti:

@for (user of users$ | async; track user.id) {
  <p>{{user.name}}</p>
}

In casi semplici in cui l’ordinamento dell’array è garantito, è possibile anche usare track $index, dove $index è una variabile di contesto spendibile all’interno del blocco:

@for (num of [1, 2, 3]; track $index) {
  <p>{{num}} i {{$index}}</p>
}

Altre variabili di contesto disponibili sono:

• $count: number: numero di elementi iterati in una collezione,
• $index: number: indice dell’elemento attuale a partire da 0,
• $first: boolean: indica se l’elemento attuale è il primo,
• $last: boolean: indica se l’elemento attuale è l’ultimo,
• $even: boolean: indica se l’indice dell’elemento attuale è pari,
• $odd: boolean: indica se l’indice dell’elemento attuale è dispari.

È possibile assegnare un alias a queste variabili usando let:

@for (item of items; track item.id; let idx = $index) {
  <p>#{{idx}} - {{item.name}}</p>
}

Un blocco @for può essere seguito da un blocco @empty il cui contenuto viene esposto nel caso in cui non vi siano elementi presenti, un po’ come se fosse un @else rispetto ad un if-statement:

@for (item of items; track item.id) {
  <li>{{item.name}}</li>
} @empty {
  <li>There are no items.</li>
}