JavaScript per principianti: Assegnare classi dinamiche con ngClass

Nelle app web è un requisito comune personalizzare l’aspetto di un elemento in base a una condizione. Ci sono alcuni modi per realizzare questo, ma se stai lavorando con Angular, la tua scelta è chiara. La direttiva ngClass fornisce una moltitudine di modi per assegnare dinamicamente i nomi delle classi agli elementi o ai componenti. La sua sintassi è concisa e supporta logiche piuttosto complesse per fornirci un controllo dettagliato sia sui nomi delle classi che sui criteri per impostarli. In questo tutorial, esamineremo alcuni dei modi più comuni per assegnare dinamicamente una classe CSS a un elemento utilizzando la direttiva ngClass.

Assegnazione di una classe CSS utilizzando il binding della proprietà [className]

Anche se questo articolo tratta della direttiva ngClass, è importante notare che, in molti casi, potresti non averne nemmeno bisogno! Grazie al binding della proprietà [className], possiamo impostare una classe tramite la proprietà nativa className di JavaScript, utilizzando la sintassi di binding []. Possiamo eseguire qualsiasi istruzione all’interno di quel binding che restituisca una stringa. Questo ci consente di impostare una o più classi in base a una condizione:

<div [className]="isActive ? 'active-class' : 'inactive-class'"></div>

Potremmo anche costruire il nome della classe al runtime:

<div [className]="'class' + someValue"></div>

Leggi: 5 Concetti di JavaScript che Ogni Sviluppatore Web Dovrebbe Conoscere

Attivazione/disattivazione della classe tramite il binding della proprietà [className]

Alcuni considerano la tecnica di commutazione della classe sopra descritta un po’ più complicata di quanto sia necessario, poiché la inactive-class probabilmente sarebbe predefinita. Se ti riconosci in questa situazione, puoi utilizzare la sintassi [class.class-name] per fornire una condizione da valutare:

<div 
  class="inactive" 
  [class.active]="isActive">
</div>

Quindi, se possiamo impostare condizionalmente una classe utilizzando il Property Binding [className], perché abbiamo bisogno della direttiva ngClass? Come vedremo, il vero motivo per utilizzare la direttiva ngClass è che ci consente di scegliere tra più classi.

Un Approfondimento sulla Direttiva ngClass

Prima di vedere come utilizzare la direttiva ngClass, sarebbe istruttivo esaminarne la definizione:

@Input('class')
klass: string

@Input()
ngClass: string | string[] | Set<string> | { [klass: string]: any; }

Osservando il codice sopra riportato, possiamo ora vedere che la sintassi [class] utilizzata in precedenza fa effettivamente parte della direttiva ngClass, tramite @Input('class'). Notiamo inoltre che la direttiva ngClass ci offre nientemeno che quattro opzioni per impostare classi dinamiche! 

Vediamo ognuna di queste nel dettaglio.

Fornire una stringa o string[]

Assegnare una stringa o un array di stringhe a ngClass ci consente di collegare classi dinamiche alle variabili di Angular. Supponiamo di avere una variabile chiamata activeClass. All’interno del nostro file .ts, possiamo impostare un nome di classe noto come "text-success" o "text-failure" in base al risultato di un’operazione:

<div 
  [ngClass]="activeClass">
</div>

La sintassi dell’array è utile per applicare più classi allo stesso elemento o componente:

<div 
  [ngClass]="[activeClass, openClass]">
</div>

Utilizzo di un’Espressione Valutata

Un metodo leggermente più avanzato – ma altamente utile – per utilizzare ngClass è quello di fornire un’espressione. La classe fornita viene applicata solo se una variabile o un’espressione viene valutata come true. Per fornire un’espressione, è necessario fornire un oggetto usando le parentesi graffe {}. A sinistra di ogni due punti – il nome della proprietà – c’è la classe che verrà applicata; a destra – il valore della proprietà – c’è l’espressione o la variabile che si desidera valutare. Ecco un esempio:

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" [ngModel]="redText"> Toggle red text.
<input type="checkbox" [ngModel]="largeFont"> Toggle large text.

<div [ngClass]="{ 'text-red': redText, 'text-large': largeFont }">

Leggi: React, Angular e Vue.js: Qual è la Differenza Tecnica?

Utilizzo dell’Operatore Ternario

L’operatore ternario consente di assegnare un valore a una variabile in base a un’espressione booleana – sia un campo booleano, sia un’istruzione che si valuta come un risultato booleano. Nel modo più basilare, l’operatore ternario, noto anche come operatore condizionale, può essere utilizzato come alternativa all’istruzione if/then/else durante l’impostazione di una variabile. 

Fornire l’operatore ternario a ngClass ci consente di specificare due classi diverse: una se un’espressione è vera e una per falsa. Ecco la sintassi di base per l’operatore ternario:

[ngClass]="expression or variable ? true class : false class"

Ecco del codice che utilizza l’operatore ternario per impostare la classe di un DIV a seconda che due variabili siano uguali o meno:

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

La Firma ngClass di tipo Set<string>: Indesiderata e Non Amata

Set è una nuova struttura dati introdotta in ES6, simile a Map. Un Set in TypeScript ci permette di memorizzare valori distinti in una lista utilizzando metodi come add(), has() e delete(). Per qualche motivo, la firma Set<string> per ngClass non ha mai davvero preso piede. Non l’ho mai usata, né conosco qualcuno che l’abbia fatto. 

Detto ciò, il Set dovrebbe contenere stringhe che rappresentano nomi di classi da applicare all’elemento o al componente. Ecco del codice TypeScript che crea un Set chiamato classes:

//Dichiara una variabile membro di classe
public classes = new Set();
 
//Aggiungi nomi di classi
classes.add('active').add('text-large');

Conclusion

In questo tutorial, abbiamo esaminato alcuni dei modi più comuni per assegnare dinamicamente una classe CSS a un elemento utilizzando la direttiva ngClass. Come puoi vedere, è davvero potente.