3 - I Nuovi Template Angular: @if, @for, @defer

<!-- Vecchia sintassi: verbose e frammentata -->
<div *ngIf="user; else loadingTpl">
  <h2>{{ user.name }}</h2>
  <div *ngIf="user.role === 'admin'; else userTpl">
    <span class="badge admin">Amministratore</span>
  </div>
  <ng-template #userTpl>
    <span class="badge user">Utente</span>
  </ng-template>
</div>
<ng-template #loadingTpl>
  <div class="spinner">Caricamento...</div>
</ng-template>
    

<!-- Nuova sintassi: chiara e lineare -->
@if (user) {
  <h2>{{ user.name }}</h2>
  @if (user.role === 'admin') {
    <span class="badge admin">Amministratore</span>
  } @else {
    <span class="badge user">Utente</span>
  }
} @else {
  <div class="spinner">Caricamento...</div>
}
    

<!-- Condizione semplice -->
@if (isLoggedIn()) {
  <app-dashboard />
}

<!-- If con else -->
@if (user()) {
  <h2>Benvenuto, {{ user().name }}</h2>
} @else {
  <app-login-form />
}

<!-- If / else if / else -->
@if (status() === 'loading') {
  <div class="spinner">Caricamento in corso...</div>
} @else if (status() === 'error') {
  <div class="error">Si è verificato un errore</div>
} @else if (status() === 'empty') {
  <div class="empty">Nessun risultato trovato</div>
} @else {
  <app-data-table [data]="data()" />
}
    

<!-- Salva il risultato della condizione in una variabile locale -->
@if (currentUser(); as user) {
  <div class="profile">
    <h3>{{ user.name }}</h3>
    <p>Email: {{ user.email }}</p>
    <p>Ruolo: {{ user.role }}</p>
  </div>
}

<!-- Utile con pipe asincrone o trasformazioni -->
@if (users() | filterActive; as activeUsers) {
  <p>Utenti attivi: {{ activeUsers.length }}</p>
}
    

<!-- Iterazione base con track per id -->
@for (product of products(); track product.id) {
  <div class="product-card">
    <h3>{{ product.name }}</h3>
    <p>{{ product.price | currency:'EUR' }}</p>
  </div>
}

<!-- Con variabili implicite -->
@for (item of items(); track item.id; let i = $index; let isFirst = $first; let isLast = $last) {
  <div class="item" [class.first]="isFirst" [class.last]="isLast">
    <span class="index">{{ i + 1 }}.</span>
    <span>{{ item.name }}</span>
  </div>
}

<!-- Track per indice (per liste senza id univoco) -->
@for (label of labels(); track $index) {
  <span class="tag">{{ label }}</span>
}
    

// Componente con lista aggiornata frequentemente
@Component({
  selector: 'app-live-feed',
  standalone: true,
  template: `
    <!-- CORRETTO: track per identità unica -->
    <!-- Quando la lista cambia, Angular riusa i nodi DOM esistenti -->
    @for (post of posts(); track post.id) {
      <app-post-card [post]="post" />
    }

    <!-- SCONSIGLIATO: track per indice -->
    <!-- Se un elemento viene aggiunto in cima, TUTTI i nodi vengono ricreati -->
    @for (post of posts(); track $index) {
      <app-post-card [post]="post" />
    }
  `
})
export class LiveFeedComponent {
  posts = signal<Post[]>([]);

  addNewPost(post: Post) {
    // Con track post.id: solo 1 nodo DOM creato
    // Con track $index: N nodi DOM ricreati
    this.posts.update(list => [post, ...list]);
  }
}
    

<!-- PRIMA: ngSwitch (verboso, richiede contenitore) -->
<div [ngSwitch]="orderStatus">
  <div *ngSwitchCase="'pending'">
    <span class="badge warning">In Attesa</span>
  </div>
  <div *ngSwitchCase="'processing'">
    <span class="badge info">In Lavorazione</span>
  </div>
  <div *ngSwitchCase="'shipped'">
    <span class="badge success">Spedito</span>
  </div>
  <div *ngSwitchCase="'delivered'">
    <span class="badge success">Consegnato</span>
  </div>
  <div *ngSwitchDefault>
    <span class="badge">Sconosciuto</span>
  </div>
</div>

<!-- DOPO: @switch (pulito, senza contenitore) -->
@switch (orderStatus()) {
  @case ('pending') {
    <span class="badge warning">In Attesa</span>
  }
  @case ('processing') {
    <span class="badge info">In Lavorazione</span>
  }
  @case ('shipped') {
    <span class="badge success">Spedito</span>
  }
  @case ('delivered') {
    <span class="badge success">Consegnato</span>
  }
  @default {
    <span class="badge">Sconosciuto</span>
  }
}
    

@defer (on viewport) {
  <!-- Contenuto caricato lazily -->
  <app-heavy-chart [data]="chartData()" />
} @placeholder {
  <!-- Mostrato prima che il caricamento inizi -->
  <div class="chart-placeholder">
    <p>Il grafico apparira qui</p>
  </div>
} @loading (after 150ms; minimum 300ms) {
  <!-- Mostrato durante il caricamento del chunk -->
  <div class="spinner">Caricamento grafico...</div>
} @error {
  <!-- Mostrato se il caricamento fallisce -->
  <div class="error">Impossibile caricare il grafico</div>
}
    

<!-- 1. on viewport: carica quando l'elemento entra nel viewport -->
@defer (on viewport) {
  <app-comments [postId]="postId()" />
} @placeholder {
  <div style="height: 200px">Scorri per vedere i commenti</div>
}

<!-- 2. on idle: carica quando il browser è inattivo -->
@defer (on idle) {
  <app-analytics-widget />
}

<!-- 3. on interaction: carica al click/focus su un elemento -->
<button #loadBtn>Mostra dettagli</button>
@defer (on interaction(loadBtn)) {
  <app-product-details [id]="productId()" />
} @placeholder {
  <p>Clicca il pulsante per vedere i dettagli</p>
}

<!-- 4. on hover: carica quando il mouse passa sopra un elemento -->
<div #previewArea>Passa il mouse per l'anteprima</div>
@defer (on hover(previewArea)) {
  <app-image-preview [url]="imageUrl()" />
}

<!-- 5. on timer: carica dopo un intervallo di tempo -->
@defer (on timer(5s)) {
  <app-newsletter-popup />
}

<!-- 6. when: carica quando una condizione diventa true -->
@defer (when isAuthenticated()) {
  <app-admin-panel />
} @placeholder {
  <p>Effettua il login per accedere al pannello admin</p>
}

<!-- 7. Combinazione di trigger -->
@defer (on viewport; on timer(10s)) {
  <app-sidebar-ads />
} @placeholder {
  <div class="ad-placeholder"></div>
}
    

<!-- Prefetch on idle, render on viewport -->
<!-- Il browser scarica il chunk quando è inattivo, -->
<!-- ma lo rende visibile solo quando entra nel viewport -->
@defer (on viewport; prefetch on idle) {
  <app-heavy-data-grid [data]="gridData()" />
} @placeholder {
  <div class="grid-skeleton">
    <div class="skeleton-row"></div>
    <div class="skeleton-row"></div>
    <div class="skeleton-row"></div>
  </div>
}

<!-- Prefetch on hover, render on interaction -->
<!-- L'utente passa il mouse e il chunk si scarica, -->
<!-- quando clicca il contenuto appare istantaneamente -->
<button #editBtn>Modifica Profilo</button>
@defer (on interaction(editBtn); prefetch on hover(editBtn)) {
  <app-profile-editor [user]="currentUser()" />
} @placeholder {
  <p>Clicca per modificare il profilo</p>
}
    

<!-- PRIMA: due direttive separate -->
<div *ngIf="notifications.length === 0" class="empty-state">
  <p>Nessuna notifica</p>
</div>
<div *ngFor="let notification of notifications">
  {{ notification.message }}
</div>

<!-- DOPO: integrato nel control flow -->
@for (notification of notifications(); track notification.id) {
  <div class="notification" [class]="notification.type">
    <span class="icon">{{ notification.icon }}</span>
    <p>{{ notification.message }}</p>
    <time>{{ notification.date | date:'short' }}</time>
  </div>
} @empty {
  <div class="empty-state">
    <img src="/assets/no-notifications.svg" alt="Nessuna notifica" />
    <h3>Tutto in ordine!</h3>
    <p>Non hai notifiche al momento.</p>
  </div>
}
    

# Migrazione automatica del control flow
ng generate @angular/core:control-flow-migration

# Il comando:
# 1. Analizza tutti i template dell'applicazione
# 2. Converte *ngIf -> @if
# 3. Converte *ngFor -> @for (con track $index come default)
# 4. Converte ngSwitch -> @switch
# 5. Rimuove le importazioni di CommonModule dove non più necessarie

# Per un singolo componente
ng generate @angular/core:control-flow-migration --path=src/app/components/my-component

# Per una dry run (anteprima senza modificare i file)
ng generate @angular/core:control-flow-migration --dry-run
    

<!-- PRIMA della migrazione -->
<div *ngIf="users$ | async as users; else loading">
  <table>
    <tr *ngFor="let user of users; trackBy: trackByUserId; let i = index">
      <td>{{ i + 1 }}</td>
      <td>{{ user.name }}</td>
      <td [ngSwitch]="user.status">
        <span *ngSwitchCase="'active'" class="green">Attivo</span>
        <span *ngSwitchCase="'inactive'" class="red">Inattivo</span>
        <span *ngSwitchDefault class="gray">N/D</span>
      </td>
    </tr>
  </table>
</div>
<ng-template #loading>
  <div class="spinner">Caricamento...</div>
</ng-template>

<!-- DOPO la migrazione automatica -->
@if (users$ | async; as users) {
  <table>
    @for (user of users; track user.id; let i = $index) {
      <tr>
        <td>{{ i + 1 }}</td>
        <td>{{ user.name }}</td>
        <td>
          @switch (user.status) {
            @case ('active') {
              <span class="green">Attivo</span>
            }
            @case ('inactive') {
              <span class="red">Inattivo</span>
            }
            @default {
              <span class="gray">N/D</span>
            }
          }
        </td>
      </tr>
    }
  </table>
} @else {
  <div class="spinner">Caricamento...</div>
}
    

<div class="dashboard">
  <!-- Header sempre visibile -->
  <header>
    <h1>Dashboard</h1>
    @if (user(); as u) {
      <span>Benvenuto, {{ u.name }}</span>
    }
  </header>

  <!-- KPI caricati immediatamente quando idle -->
  @defer (on idle) {
    <app-kpi-cards [metrics]="kpiData()" />
  } @placeholder {
    <div class="kpi-skeleton">
      @for (i of [1,2,3,4]; track $index) {
        <div class="skeleton-card"></div>
      }
    </div>
  }

  <!-- Grafico caricato quando entra nel viewport -->
  @defer (on viewport; prefetch on idle) {
    <app-revenue-chart [data]="revenueData()" />
  } @placeholder {
    <div class="chart-placeholder" style="height: 400px">
      <p>Grafico ricavi</p>
    </div>
  } @loading (after 200ms) {
    <div class="spinner">Caricamento grafico...</div>
  }

  <!-- Tabella dati caricata su richiesta -->
  <button #showTable>Mostra dettagli</button>
  @defer (on interaction(showTable); prefetch on hover(showTable)) {
    @if (tableData(); as data) {
      @for (row of data; track row.id) {
        <app-data-row [row]="row" />
      } @empty {
        <p>Nessun dato disponibile per il periodo selezionato</p>
      }
    }
  } @placeholder {
    <p>Clicca per visualizzare i dettagli</p>
  }
</div>
    

<div class="product-list">
  <!-- Filtri -->
  <div class="filters">
    @for (category of categories(); track category.id) {
      <button
        [class.active]="selectedCategory() === category.id"
        (click)="selectCategory(category.id)">
        {{ category.name }}
        <span class="count">({{ category.count }})</span>
      </button>
    }
  </div>

  <!-- Stato di caricamento -->
  @if (isLoading()) {
    <div class="loading">
      @for (i of [1,2,3]; track $index) {
        <div class="product-skeleton"></div>
      }
    </div>
  } @else {
    <!-- Lista prodotti -->
    @for (product of filteredProducts(); track product.id) {
      <div class="product-card">
        <h3>{{ product.name }}</h3>
        <p>{{ product.description }}</p>

        @switch (product.availability) {
          @case ('in_stock') {
            <span class="badge success">Disponibile</span>
          }
          @case ('low_stock') {
            <span class="badge warning">Ultime scorte ({{ product.stock }})</span>
          }
          @case ('out_of_stock') {
            <span class="badge danger">Esaurito</span>
          }
        }

        <div class="price">{{ product.price | currency:'EUR' }}</div>
      </div>
    } @empty {
      <div class="empty-state">
        <h3>Nessun prodotto trovato</h3>
        <p>Prova a modificare i filtri di ricerca</p>
        <button (click)="resetFilters()">Resetta filtri</button>
      </div>
    }
  }
</div>
    

@Component({
  selector: 'app-settings-page',
  standalone: true,
  template: `
    <h1>Impostazioni</h1>

    <!-- Sezione profilo: sempre disponibile -->
    <app-profile-settings />

    <!-- Pannello admin: caricato solo se l'utente è admin -->
    @defer (when isAdmin()) {
      <app-admin-settings />
    } @placeholder {
      @if (!isAdmin()) {
        <div class="restricted">
          <p>Accesso riservato agli amministratori</p>
        </div>
      }
    }

    <!-- Impostazioni avanzate: defer + condizione -->
    @if (showAdvanced()) {
      @defer (on idle) {
        <app-advanced-settings />
      } @loading {
        <div class="spinner">Caricamento impostazioni avanzate...</div>
      }
    }
  `
})
export class SettingsPageComponent {
  private authService = inject(AuthService);

  isAdmin = computed(() =>
    this.authService.currentUser()?.role === 'admin'
  );
  showAdvanced = signal(false);
}
    

<!-- ERRORE 1: Track per $index su liste dinamiche -->
<!-- Se un elemento viene inserito in testa, TUTTI i nodi DOM vengono ricreati -->
@for (user of users(); track $index) {
  <app-user-card [user]="user" />  <!-- Ricreato inutilmente! -->
}
<!-- FIX: track user.id -->

<!-- ERRORE 2: @defer senza placeholder -->
<!-- L'utente vede uno spazio vuoto senza capire cosa succede -->
@defer (on viewport) {
  <app-comments />
}
<!-- FIX: aggiungi @placeholder con indicazione visiva -->

<!-- ERRORE 3: @defer per contenuti critici above-the-fold -->
<!-- Il contenuto principale non deve essere lazy -->
@defer (on idle) {
  <app-hero-section />  <!-- MAI! Il hero deve essere immediato -->
}

<!-- ERRORE 4: Annidamento eccessivo -->
@if (condition1()) {
  @for (item of items(); track item.id) {
    @if (item.visible) {
      @switch (item.type) {
        @case ('A') {
          @for (sub of item.children; track sub.id) {
            <!-- Troppo annidato! Estrai un componente -->
          }
        }
      }
    }
  }
}
<!-- FIX: estrai sotto-componenti per ridurre l'annidamento -->