Attribute: ngClass

Relax. We'll talk through this in plain words — no textbook voice.

ngClass directive is used to dynamically add or remove CSS classes on an element.

typescript

<!-- Object syntax -->
<div [ngClass]="{'active': isActive, 'disabled': isDisabled, 'highlight': true}">
  Dynamic Classes
</div>

<!-- Array syntax -->
<div [ngClass]="['btn', 'btn-primary', isLarge ? 'btn-lg' : 'btn-sm']">
  Button
</div>

<!-- String syntax -->
<div [ngClass]="currentTheme">
  Themed Content
</div>

// component.ts
export class MyComponent {
  isActive = true;
  isDisabled = false;
  isLarge = true;
  currentTheme = 'dark-theme';
}

You should see

(The 'active' and 'highlight' classes will be applied to the first div)