Nella maggior parte dei casi, la classe css che applichiamo a un controllo è più che sufficiente a stilizzarlo. Tuttavia, esistono casi in cui in vogliamo applicare anche degli stili inline tramite l'attributo HTML style in base a determinate condizioni. Angular ci permette di aggiungere dinamicamente uno stile ad un controllo tramite la direttiva ngStyle.
Questa direttiva accetta in input un oggetto dove ogni proprietà corrisponde al nome dello stile CSS che vogliamo applicare, e il valore della proprietà corrisponde al valore dello stile. Il codice HTML è banale in quanto dobbiamo mettere in binding la direttiva con una proprietà del component (styles in questo caso).
<div [ngStyle]="styles">Questo div ha stili dinamici da binding</div>
Nel component, dobbiamo valorizzare la proprietà in base alle nostre necessità.
styles: {}; ... setStyles() { this.styles = { 'background-color': this.soldOut ? 'red' : 'white'; }; }
Grazie a questa tecnica possiamo applicare stili CSS dinamicamente, senza dover creare tante piccole classi CSS per ogni possibile combinazione di dati.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Criptare la comunicazione con mTLS in Azure Container Apps
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Sfruttare lo streaming di una chiamata Http da Blazor
Le novità di Angular: i miglioramenti alla CLI
Utilizzare il trigger SQL con le Azure Function
Utilizzare i primary constructor in C#
Gestire i null nelle reactive form tipizzate di Angular
Eseguire attività pianificate con Azure Container Jobs
Eseguire una query su SQL Azure tramite un workflow di GitHub
Usare una container image come runner di GitHub Actions
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Modificare i metadati nell'head dell'HTML di una Blazor Web App
I più letti di oggi
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- ASP.NET 3.5 per tutti
- .NET Conference Italia 2023 - Milano e Online
- Utilizzare Docker Compose con Azure App Service
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!