Binding degli stili CSS in Angular

In Angular è anche possibile aggiungere direttamente gli stili per un blocco. Questo viene fatto utilizzando un attributo del tag, scritto nel seguente formato:

[style.styleProperty]="valore della proprietà"

In questo caso, i nomi delle proprietà CSS che contengono un trattino interno, nel nostro caso saranno scritti in camelCase. Diamo un'occhiata ad alcuni esempi per vedere come funziona.

Esempio

Impostiamo lo sfondo di un elemento:

<div [style.backgroundColor]="'blue'">
	text
</div>

Esempio

Supponiamo di avere una proprietà che contiene il colore di sfondo:

export class AppComponent {
	public value: string = 'red';
}

Applichiamo questa proprietà come valore per lo stile:

<div [style.backgroundColor]="value">
	text
</div>

Esempio

Supponiamo di avere una proprietà booleana:

export class AppComponent {
	public isActive: boolean = true;
}

Colleghiamo diversi valori alla proprietà CSS a seconda del contenuto della proprietà booleana. Usiamo per questo l'operatore ternario:

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	text
</div>

Problemi pratici

Dato un blocco. Fai in modo che il primo click sul blocco lo colori di rosso, e il secondo click - di verde.

Dato un blocco. Data un pulsante. Fai in modo che premendo il pulsante la larghezza del blocco raddoppi.