DEV Community

Atilla Baspinar
Atilla Baspinar

Posted on

Angular Class and Style Binding

#angular #css #tutorial #webdev

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>
Enter fullscreen mode Exit fullscreen mode

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

isActive = true;  // → <div class="active">
isActive = false; // → <div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Only keys with truthy values are added to the element.

2. Style binding

Single style 

<div [style.background-color]="bgColor">Content</div>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

<div [style.font-size.px]="fontSize">Content</div>
Enter fullscreen mode Exit fullscreen mode 
fontSize = 16; // → <div style="font-size: 16px;">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)