Angular Class and Style Binding

Angular lets you bind CSS classes and inline styles to elements dynamically using bracket syntax directly in templates.

1. Class binding

Single class

<div [class.active]="isActive">Content</div>

The value must be truthy to add the class, falsy to remove it.

isActive = true;  // → <div class="active">

isActive = false; // → <div>

Multiple classes

Bind an object where each key is a class name and each value is a boolean expression:

<div [class]="{ active: isActive, disabled: isDisabled, highlighted: count > 0 }">Content</div>

Only keys with truthy values are added to the element.

2. Style binding

Single style

<div [style.background-color]="bgColor">Content</div>

The value must be a valid CSS value string. Setting it to null or undefined removes the style.

bgColor = 'coral';  // → <div style="background-color: coral;">

bgColor = null;     // → style removed

You can also include a unit directly in the property name:

<div [style.font-size.px]="fontSize">Content</div>

fontSize = 16; // → <div style="font-size: 16px;">

Multiple styles

Bind an object where each key is a CSS property name and each value is a CSS value string:

<div [style]="{ 'background-color': bgColor, 'font-size': fontSize + 'px', opacity: opacity }">Content</div>

3. Combining with static classes

Static classes and dynamic class bindings coexist safely — Angular merges them:

<!-- Tailwind static classes + dynamic binding -->

<button class="px-4 py-2 rounded font-semibold" [class.opacity-50]="isDisabled">

  Submit

</button>

The static Tailwind classes are always present. opacity-50 is added or removed based on isDisabled.

4. Single and multi binding on the same element

You can mix single-property and multi-property bindings on the same element. Angular evaluates them independently and merges the results:

<div

  class="card"

  [class.active]="isActive"

  [class]="{ highlighted: isHighlighted, pinned: isPinned }"

  [style.border-color]="borderColor"

  [style]="{ padding: '1rem', opacity: isVisible ? 1 : 0 }"

>

  Content

</div>

What happens to classes and styles not targeted by a binding?

They are preserved. Angular treats static classes and dynamic bindings as additive — each binding only controls the specific classes or styles it declares. Everything else is left untouched.

For classes:

• 
  class="card" always stays on the element. No binding touches it.


• 
  [class.active] only ever adds or removes the active class. All other classes are unaffected.


• 
  [class]="{ highlighted, pinned }" only manages highlighted and pinned. Every other class on the element is ignored.

For styles:

• 
  [style.border-color] only sets or removes border-color. All other inline styles remain.


• 
  [style]="{ padding, opacity }" only controls padding and opacity. Other styles are left as-is.

So with isActive = true, isHighlighted = false, isVisible = true, and borderColor = 'red', the rendered element would be:

<div class="card active pinned" style="border-color: red; padding: 1rem; opacity: 1;">

  Content

</div>

highlighted is absent because its value was false. card and pinned are present because nothing removed them. Angular never clears a class or style it was not explicitly told to manage.