In questa guida esamineremo tre tipi di direttive supportate da Angular, vedremo quindi i component, le direttive strutturali e le direttive di attributo. Vedremo anche alcune delle direttive Angular più usate. Questa guida fa parte di Angular: la guida definitiva.
Index
Cosè una direttiva in Angular
Le direttive in Angular ci aiutano a manipolare il DOM. È possibile modificare l’aspetto, il comportamento o il layout di un elemento nel DOM utilizzando le direttive. Ti aiutano ad estendere l’HTML.
Esistono tre tipi di direttive in Angular:
- Direttive sui Componenti
- Direttive Strutturali
- Direttive di Attributo
Direttive sui Componenti
I componenti sono direttive speciali in Angular. Sono direttive con un template.
Leggi anche:
Direttive Strutturali
Le direttive strutturali possono cambiare il template, aggiungendo e rimuovendo elementi DOM. Tutte le direttive strutturali sono precedute dal simbolo (*).
Le direttive strutturali più comunemente utilizzate
ngFor
NgFor è una direttiva strutturale Angular, ripete una parte del modello HTML tante volte quanti sono gli elementi di un elenco iterabile (Collection). NgFor è simile a ngRepeat in AngularJS.
Esempio:
<tr *ngFor="let cliente of clienti;">
<td>{{cliente.idCLiente}}</td>
<td>{{cliente.nome}}</td>
<td>{{cliente.indirizzo}}</td>
<td>{{cliente.citta}}</td>
<td>{{cliente.regione}}</td>
</tr>
Puoi leggere di più sulle direttive ngFor nella guida dedicata.
ngSwitch
La direttiva ngSwitch ti consente di aggiungere o rimuovere elementi dal DOM in base alla corrispondenza di una Espressione. La direttiva ngSwitch è comunemente utilizzata insieme a ngSwitchCase e ngSwitchDefault.
Esempio:
<div [ngSwitch]="COndizione">
<div *ngSwitchCase="Espressione1”>Primo Template</div>
<div *ngSwitchCase="Espressione2">Secondo template</div>
<div *ngSwitchDefault?>Template di Default</div>
</div>
Puoi leggere di più sulle direttive ngSwitch nella guida dedicata.
ngIf
Le direttive ngIf vengono utilizzate per aggiungere o rimuovere elementi HTML in base a una espressione. L’espressione deve restituire un valore booleano. Se l’espressione è falsa, l’elemento viene rimosso, altrimenti l’elemento viene inserito.
Esempio:
<div *ngIf="condizione">
<p>Il paragrafo verrà mostrato se la condizione darà come risultato true</p>
</div>
Puoi leggere di più sulle direttive ngIf nella guida dedicata.
Direttive di Attributo
Una direttiva Attributo o stile può cambiare l’aspetto o il comportamento di un elemento.
Le direttive di attributo più comunemente utilizzate
ngModel
La direttiva ngModel viene utilizzata per ottenere un’associazione dei dati bidirezionale (two-way data binding).
Leggi anche: Data Binding in Angular: la guida
ngClass
La direttiva ngClass viene utilizzata per aggiungere o rimuovere classi CSS da un elemento HTML. Utilizzando ngClass è possibile creare stili dinamici nelle pagine HTML.
Esempio:
<div [ngClass]="'classe1 classe2'">...</div>
ngStyle
La direttiva ngStyle viene utilizzata per modificare le proprietà di stile degli elementi HTML. Possiamo anche associare queste proprietà a valori che possono essere aggiornati dall’utente o dai nostri componenti.
Esempio:
<div [ngStyle]="{'color': 'red', 'font-size': '30px'}">
testo
</div>
Come creare direttive personalizzate in Angular
Puoi creare direttive personalizzate in Angular creando una classe JavaScript ed applicando l’attributo @Directive a quella classe. È possibile scrivere il comportamento desiderato nella classe.