Angular Academy · Lezione

Classi e stili dinamici

Colleghi classi e stili in modo reattivo.

Classi e stili dinamici è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Stile dinamico nei template

Angular consente di associare classi e stili inline allo stato del componente, così l'interfaccia si aggiorna automaticamente quando cambiano i dati.

Associazione di una singola classe

Utilizzi [class.name] per attivare o disattivare una classe CSS in base a un'espressione booleana.

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

// component
isActive = true;

Più classi con ngClass

ngClass applica più classi contemporaneamente, utilizzando un oggetto che associa i nomi delle classi a valori booleani.

<div [ngClass]="{ active: isActive, disabled: isDisabled }">
  Item
</div>

ngClass con array e stringhe

ngClass accetta anche una stringa di nomi di classe o un array.

<div [ngClass]="'box highlighted'"></div>
<div [ngClass]="['box', 'rounded']"></div>

Associazione di un singolo stile

Utilizzi [style.property] per associare una singola proprietà CSS inline a un valore.

<p [style.color]="textColor">Hello</p>

// component
textColor = "tomato";

Associazioni di stile con unità

Aggiunga un suffisso di unità per associare valori numerici a unità come pixel o percentuali.

<div [style.width.px]="boxWidth"></div>
<div [style.height.%]="boxHeight"></div>

// component
boxWidth = 200;
boxHeight = 50;

Più stili con ngStyle

ngStyle imposta più stili inline contemporaneamente a partire da un oggetto.

<div [ngStyle]="{ color: textColor, 'font-size.px': size }">
  Styled
</div>

L'associazione di classe prevale in caso di conflitto

Quando le classi statiche e quelle associate si sovrappongono, Angular le unisce; l'associazione controlla se la classe dinamica è presente, senza rimuovere quelle statiche.

<div class="card" [class.active]="isActive"></div>
<!-- card always present; active toggles -->

Reazione allo stato

Le associazioni vengono rivalutate durante il rilevamento delle modifiche, quindi l'aggiornamento di una proprietà del componente modifica immediatamente lo stile dell'elemento.

toggle() {
  this.isActive = !this.isActive;
}

Scelta tra classe e stile

Preferisca le associazioni di classe con regole CSS per una migliore manutenibilità; riservi le associazioni dirette di stile ai valori realmente dinamici, come una larghezza o un colore calcolati.

Con i Signals

Le associazioni di classe e stile funzionano anche con i signals; è sufficiente chiamare il signal nell'espressione del template.

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

// component
isActive = signal(true);

Verifica rapida

Verifichi la Sua comprensione delle classi e degli stili dinamici.

Riepilogo

Attivi o disattivi una classe con [class.name] o più classi con ngClass; imposti un singolo stile con [style.prop] (con un'unità opzionale) o più stili con ngStyle. Le associazioni reagiscono automaticamente allo stato, inclusi i signals.

Domande Frequenti

La lezione «Classi e stili dinamici» è gratuita?

Sì — il testo completo di «Classi e stili dinamici» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Classi e stili dinamici»?

Colleghi classi e stili in modo reattivo. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Classi e stili dinamici»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy