CSS-stijlen aan een tag binden in Angular

Voor een HTML-element kunnen we ook een bepaalde set stijlen instellen. Dit wordt gedaan met behulp van de directive ngStyle. Aan deze directive moet een object worden doorgegeven met CSS eigenschappen en hun waarden.

Laten we het proberen:

app/app.component.html<div [ngStyle]="{'color': 'red', 'font-size': '20px'}">
  text
</div>

app/app.component.tsexport class AppComponent {
  public obj = {
    color: red,
    fontSize: '30px',
    fontWeight: 'bold'
  }
}