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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Utilizzare Tailwind CSS all'interno di React: primi componenti
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Creare moduli CSS in React
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Eseguire una query su SQL Azure tramite un workflow di GitHub
Come migrare da una form non tipizzata a una form tipizzata in Angular
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Ottimizzazione dei block template in Angular 17
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Creare un'applicazione React e configurare Tailwind CSS
Miglioramenti nell'accessibilità con Angular CDK