In Angular, le direttive di attributo svolgono un ruolo fondamentale nel modificare dinamicamente il comportamento e l'aspetto degli elementi senza alterare la struttura del DOM. Due delle direttive di attributo più comunemente utilizzate sono ngClass e ngStyle. Queste direttive offrono modalità flessibili per controllare gli stili degli elementi e le classi CSS in base allo stato del componente.

Che cos'è ngClass?

Questo è particolarmente utile quando si desidera modificare l'aspetto di un elemento in risposta ai cambiamenti dei dati — ad esempio, evidenziando un elemento attivo o applicando stili in base allo stato.

ngClass supporta la sintassi a oggetto, array di stringhe e funzioni che restituiscono questi formati per applicare dinamicamente le classi.

Sintassi a Oggetto

Utilizzare un oggetto in cui le chiavi sono i nomi delle classi e i valori sono condizioni booleane. Se la condizione è true, la classe viene applicata.

In questo esempio, le classi vengono aggiunte o rimosse in base al valore della proprietà isActive nel componente.

Se isActive è true, la classe active viene aggiunta e inactive viene rimossa. Se isActive è false, avviene il contrario.

Array di stringhe

Utilizzare un array in cui ogni stringa rappresenta un nome di classe CSS che verrà aggiunto all'elemento. Questo approccio è utile quando si desidera applicare più classi dinamicamente senza condizioni.

Qui, le classi elencate nell'array vengono applicate all'elemento.

L'utilizzo di un array è utile quando si desidera assegnare dinamicamente più classi, specialmente quando il numero di classi può variare.

Funzione

Utilizzare una funzione che restituisce uno qualsiasi dei formati supportati: un oggetto, un array di stringhe o una singola stringa. Questo è utile quando le classi applicate dipendono da una logica più complessa o da condizioni dinamiche.

ngClass può anche accettare una funzione che restituisce un oggetto, un array o una stringa a seconda della logica definita.

In questo caso, il metodo getClass() restituisce un oggetto con i nomi delle classi CSS come chiavi e condizioni booleane come valori.

• Se isError è true, verrà applicata la classe error-class;
• Se isSuccess è true, verrà applicata la classe success-class;
• Se entrambe sono false, non verrà aggiunta alcuna classe.

Che cos'è ngStyle?

Con ngStyle, è possibile modificare proprietà come il colore di sfondo, il font, la dimensione, il posizionamento e altro ancora — tutto direttamente dal componente.

Come funziona ngStyle?

ngStyle accetta un oggetto in cui le chiavi sono nomi di proprietà CSS e i valori sono espressioni valutate durante il rendering.

Se un'espressione restituisce un valore, tale valore viene applicato alla corrispondente proprietà CSS dell'elemento.

Esempio con un oggetto di stile

In questo esempio, modifichiamo dinamicamente il colore del testo e la dimensione del font dell'elemento:

Se textColor è red e fontSize è 20px, questi stili verranno applicati all'elemento. Questo approccio consente di combinare facilmente più stili in un'unica espressione per una maggiore flessibilità.

Esempio con una Variabile ed Espressione

Se è necessario applicare stili in base a una logica, è possibile utilizzare espressioni direttamente nel template:

Se isActive è true, il colore di sfondo sarà verde; se è false, sarà rosso. In questo caso viene utilizzato un operatore ternario per rendere la logica concisa ed espressiva.

Esempio con un Valore Dinamico

Le espressioni in ngStyle possono anche basarsi su metodi. È possibile utilizzare metodi del componente per calcolare dinamicamente i valori degli stili:

In questo esempio, il metodo getDynamicStyle() restituisce un oggetto stile basato sul valore corrente di isDarkMode.

Questo risulta particolarmente utile quando gli stili dipendono da condizioni esterne come le preferenze dell'utente, l'ora del giorno o i temi dell'applicazione.

Quando utilizzare ngClass rispetto a ngStyle?

• Utilizzare ngClass quando si lavora con classi CSS predefinite. Questa soluzione è ideale quando gli stili vengono riutilizzati in più punti e si desidera un controllo centralizzato degli stili tramite il foglio di stile;

• Utilizzare ngStyle quando è necessario applicare stili in modo dinamico e diretto — ad esempio, per impostare colori, dimensioni o altre proprietà visive che non sono legate a classi riutilizzabili.

Utilizzando sia ngClass che ngStyle, è possibile controllare facilmente ed efficientemente l'aspetto e il comportamento degli elementi in base ai dati del componente — tutto senza dover aggiornare manualmente il DOM.