Lesson 9 / 30

ngClass & ngStyle

Toggle CSS classes and inline styles from your component.

Conditional classes

[ngClass] takes an object where keys are class names and values decide whether they apply.

<div [ngClass]="{ active: isActive, disabled: !isEnabled }">
  Card
</div>

<!-- for a single class, plain binding is simpler -->
<div [class.active]="isActive">Card</div>

Inline styles

[ngStyle] binds several CSS properties at once from an object.

<div [ngStyle]="{ color: textColor, 'font-weight': isBold ? 'bold' : 'normal' }">
  Styled text
</div>