Style binding

Single style binding

To create a single style binding, use the prefix style followed by a dot and the name of the CSS style.

export class CardComponent {
...
  size: string = '1.2 rem';
...
}

...
<p [style.fontSize]="size">Server with Id {{server.id}} is {{server.status}}</p>
...

Multiple styles binding

export class CardsComponent{
...
  size: string = '1.2 rem';
  style: string = 'font-size: 1.2rem; color: cornflowerblue;';
...
}

...
<p [style.fontSize]="size">Server with Id {{server.id}} is {{server.status}}</p>
<p [style]="style">Server status from method: {{getServerStatus()}}</p>
...

More here!

• Class binding
• Attribute binding