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
Rendere sicuro l'endpoint di HealthCheck in ASP.NET Core
Clonare un oggetto utilizzando il BinaryFormatter
Utilizzare il lazy loading senza proxy con Entity Framework Core 2.1
Serverless apps with Azure Functions v2 and .NET Core (.NET Conference Italia 2018)
Creare un validator custom per le reactive form in Angular
Inviare web push notification da ASP.NET Core Parte 2
Impostare una policy di retry con Polly e IHttpClientFactory in ASP.NET Core 2.1
Includere un button in un component ed esporne l'evento click in Angular
Provare velocemente una cartella locale su Azure Web App con Azure CLI
Gestire il warmup di una web app Azure in bilanciamento di carico
Le novità dell'October 2018 Update per la Universal Windows Platform
Utilizzare la direttiva Include in un template T4
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: http://aspit.co/wkly buon week-end!
- Utilizzare il controllo Expander nella Universal Windows Platform
- Testare la compatibilità a Windows 10S con la Universal Windows Platform
- Utilizzare i tipi spatial con Entity Framework Core 2.2
- Eseguire un template T4 in fase di build
- Creare un'applicazione che utilizza SCSS invece dei CSS tramite Angular-CLI