Styling in Angular with ngClass and ngStyle

Angular styling is clean when you bind classes or style objects instead of building strings manually.

ngClass (most common)

<div [ngClass]="{ online: isOnline, offline: !isOnline }">
  Status: {{ isOnline ? 'Online' : 'Offline' }}
</div>

export class StatusBadgeComponent {
  isOnline = true;
}

ngStyle (dynamic inline styles)

<p [ngStyle]="{ fontSize: fontSize + 'px' }">
  Adjustable text
</p>

export class FontDemoComponent {
  fontSize = 18;
}

Best practice

• Use CSS classes for most styling
• Use ngStyle only when you truly need dynamic values

Next: Pipes, formatting data like dates and currency.