Le direttive strutturali in Angular

Abbiamo detto che una direttiva strutturale è una direttiva che modifica il DOM aggiungendo o rimuovendo porzioni di template; con i concetti introdotti fin qui, possiamo iniziare ad intravedere anche come questo avviene.

Poiché implementare questo tipo di direttiva è particolarmente complesso e decisamente poco comune, ci limiteremo a studiare il comportamento delle direttive strutturali già presenti in Angular.

La direttiva strutturale Angular ngTemplateOutlet.

La direttiva strutturale ngTemplateOutlet consente di renderizzare un template nel punto desiderato, tramite la sua template variable. Questa direttiva è presente in CommonModule, un modulo Angular che dovremo importare in app.component.ts:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent { }

A questo punto possiamo usarla:

<div [style]="{ border: '1px solid black' }">
  <ng-container *ngTemplateOutlet="ref" />
</div>


<hr />


<div [style]="{ border: '1px solid red' }">
  <ng-template #ref>
    <p>Hello</p>
  </ng-template>
</div>

In questo esempio abbiamo due div, uno con bordo nero e uno con bordo rosso.
Dentro il div con bordo rosso è dichiarato un template di nome ref. Questo template viene renderizzato nel div con bordo nero grazie a ngTemplateOutlet.

Per stilizzare i div abbiamo usato un data binding passando le regole rappresentate come oggetto anziché popolando l’attributo in modo HTML standard. Questa è una semplicissima comodità con cui Angular ci permette di controllare dinamicamente gli stili inline di un elemento.

Prima di vedere le altre direttive strutturali più comuni, osserviamo che ngTemplateOutlet non è applicata su un tag comune, ma su ng-container; questo è un tag speciale di Angular che consente di applicare una direttiva strutturale senza generare un rispettivo nodo sul DOM; il suo uso è facoltativo.

La direttiva strutturale Angular ngIf.

Attenzione : la seguente direttiva strutturale *ngIf é ora DEPRECATA in Angular 20. Viene mantenuta per compatibilità ma Angular raccomanda fortemente l’uso della nuova sintassi di controllo del flusso @if introdotta dalla versione 17.

La direttiva ngIf ci permette di condizionare ad un’espressione una certa porzione di template:

<p *ngIf="false">Hello</p>
<p *ngIf="true">World</p>

Solitamente questa direttiva si applica direttamente sul tag coinvolto, ma è comunque possibile usare ng-container qualora la porzione di template condizionale includa più di un nodo del DOM. È anche possibile prevedere un else sfruttando le template variables.

<p *ngIf="loading; else data">Loading...</p>
<ng-template #data>{{ text }}</ng-template>

Come vedremo più avanti, questa direttiva strutturale è stata sostituita da una nuova sintassi introdotta in Angular, perciò raramente ci capiterà di usarla su progetti nuovi.

La direttiva strutturale Angular ngSwitch.

Attenzione : la seguente direttiva strutturale *ngSwitch é ora DEPRECATA in Angular 20. Viene mantenuta per compatibilità ma Angular raccomanda fortemente l’uso della nuova sintassi di controllo del flusso @switch introdotta dalla versione 17.

Similarmente a ngIf, ngSwitch ci permette di rappresentare condizionalmente porzioni di template a seconda di diverse casistiche:

<ng-container [ngSwitch]="expression">
  <p *ngSwitchCase="1">Case 1</p>
  <p *ngSwitchCase="2">Case 2</p>
  <p *ngSwitchDefault>Case 3</p>
</ng-container>

Questa direttiva è particolare, nel senso che non è una direttiva strutturale di per sé, ma lavora insieme a ngSwitchCase e ngSwitchDefault per ottenere il funzionamento che tutti ci aspettiamo.

Come ngIf, anche questa direttiva strutturale è oggi sostituita dalla nuova sintassi.

La direttiva strutturale Angular ngFor.

Attenzione : le seguente direttiva strutturale *ngFor é ora DEPRECATA in Angular 20. Viene mantenuta per compatibilità ma Angular raccomanda fortemente l’uso della nuova sintassi di controllo del flusso @for introdotta dalla versione 17.

L’ultima direttiva strutturale che vedremo, anch’essa ormai sostituita, è ngFor. Questa direttiva ci permette di ripetere un template più volte per ogni elemento di un array:

<p *ngFor="let i of [1, 2, 3]">{{i}}</p>

Il funzionamento è abbastanza auto-esplicativo; da questo esempio si vede come tramite le direttive strutturali sia possibile non solo condizionare il rendering di alcune porzioni di template, ma anche introdurre sintassi ad hoc e creare nuove variabili che possono essere usate all’interno del template.

Abbiamo visto come le direttive strutturali *ngIf, *ngSwitch e *ngFor – da sempre centrali in Angular – siano state deprecate a partire da Angular 20, in favore della nuova sintassi di controllo del flusso introdotta nella versione 17.

L’unica direttiva strutturale non deprecata è *ngTemplateOutlet, ancora pienamente supportata.

Nei prossimi capitoli vedremo come usare la nuova sintassi, più chiara e moderna.