Impostare uno stile CSS via style binding in Angular

di Stefano Mostarda, in HTML5, Angular,

Nello script #226 abbiamo visto come utilizzare la direttiva ngStyle per aggiungere a un tag HTML l'attributo style con alcuni stili CSS. In questo script facciamo la stessa cosa ma utilizando una funzionalità diversa: lo style binding.
Questa funzionalità ci permette di mettere in binding una specifica proprietà CSS con un valore nel component utilizzando una sintassi di binding particolare come possiamo vedere dal codice.

<div [style.background-color]="color">Questo div ha un background dinamico da binding</div>

Utilizzando la sintassi [style.proprietacss] possiamo impostare la specifica proprietà CSS. L'importante è esporre nel component la variabile che imposta il valore CSS.

color: '';

...

setColor() {
  this.color = level > 0 : 'white' : 'red';
}

Ovviamente, nella maggior parte dei casi conviene utilizzare una classe CSS per esigenze simili, tuttavia in piccoli casi specifici, utilizzare questa tecnica è sicuramente utile.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi