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.