Built-in Attributes — @class, @style, @attr
Angular 17+ introduced cleaner @ syntax for class, style, and attribute bindings.
Angular 17 introduced a new @ syntax for built-in attribute bindings — @class, @style, and @attr.
"Naya syntax = naya uniform — same @ symbol for everything." Just like a new uniform makes things consistent, the @ syntax makes all attribute bindings look the same.
These are alternatives to the old [class.xxx], [style.xxx], and [attr.xxx] syntax. Both work. The @ syntax is cleaner and more consistent.
<!-- Old syntax -->\n<div [class.active]="isActive"></div>\n\n<!-- New @ syntax -->\n<div @class.active="isActive"></div>@class makes toggling CSS classes cleaner:
<!-- Toggle single class -->\n<div @class.active="isActive">Active content</div>\n<div @class.highlighted="isHighlighted">Highlighted</div>\n\n<!-- Multiple classes with object syntax -->\n<div @class="{'active': isActive, 'disabled': !isEnabled}"></div>"Class on/off karna = light switch — @class se toggle karo."
Same as [class.active]="isActive" but cleaner. No square brackets, just @class.active="condition".
For multiple classes, use the object syntax with @class="{'class1': cond1, 'class2': cond2}".
@style sets inline styles with cleaner syntax:
<!-- Single style property -->\n<p @style.color="textColor">Colored text</p>\n\n<!-- With CSS unit -->\n<div @style.font-size.px="fontSize">Size: {{ fontSize }}px</div>\n\n<!-- Dynamic with expression -->\n<div @style.background-color="isError ? '#fef2f2' : '#f0fdf4'"></div>\n\n<!-- Multiple styles with object -->\n<div @style="{'color': textColor, 'font-size.px': size}"></div>"Inline style = temporary paint — jab tak component hai tab tak." Unlike CSS classes which affect the whole app, inline styles only apply to that specific element instance.
@attr sets any HTML attribute — useful for ARIA, data attributes, and non-DOM-property attributes:
<!-- ARIA accessibility -->\n<button @attr.aria-label="'Close dialog'" @attr.aria-expanded="isOpen.toString()">\n X\n</button>\n\n<!-- Custom data attributes -->\n<div @attr.data-id="item.id" @attr.data-type="item.type">{{ item.name }}</div>\n\n<!-- HTML attributes that aren't DOM properties -->\n<img @attr.loading="'lazy'" @attr.fetchpriority="'high'">"Attributes = nametag — HTML element ko extra information do."
Difference: Properties vs attributes. [href] sets the DOM property. @attr.href sets the HTML attribute. For most cases, use properties. Use @attr for ARIA, data attributes, and things that don't have DOM property equivalents.
Quick reference — old vs new:
| Use Case | Old Syntax | New @ Syntax |
|---|---|---|
| Toggle class | [class.active]="x" | @class.active="x" |
| Set style | [style.color]="x" | @style.color="x" |
| Set attribute | [attr.aria-label]="x" | @attr.aria-label="x" |
| Multiple classes | [class]="{'a': c1}" | @class="{'a': c1}" |
| ngClass directive | [ngClass]="..." | @class="..." (no import!) |
"Dono kaam karte hai — @ naya hai, [] purana hai, result same." Both work, both are supported. Choose whichever you prefer.
Key Takeaways
- ✅ @class.active="condition" toggles CSS classes — cleaner than [class.active].
- ✅ @style.color="value" sets inline styles — supports units with @style.font-size.px.
- ✅ @attr.aria-label sets HTML attributes — use for ARIA, data attributes.
- ✅ @class replaces ngClass — no import needed, built-in syntax.
- ✅ Old [] and new @ syntax both work. Choose one and be consistent.
Want to track your progress?
Log in to save your place and pick up where you left off.
Progress track karna chahte ho?
Login karo apni progress save karne ke liye aur jahan chhoda tha wahan se shuru karo.
Login