Style Binding

Style Binding is a variation of property binding, very similar to Class Binding. If you want to apply some inline styles to this button, based on some condition.

Interface

export interface User {
  firstName: string,
  lastName: string,
  isActive?: boolean
}

Mock

this.users = [
    {
      firstName: 'John',
      lastName: 'Doe',
      isActive: true
    },
    {
      firstName: 'Kevin',
      lastName: 'Johnson',
      isActive: false
    }
  ];

HTML

<div class="card" 
    *ngFor="let user of users" 
    [class.bg-light]="user.isActive" 
    [style.border-color]="user.isActive ? 'green' : ''">
    <h3 [ngStyle]="currentStyles">
        {{ user.firstName }} {{ user.lastName }}
    </h3>
</div>