Dynamic Classes and Styles
Bind classes and styles reactively.
Dynamic Classes and Styles is a free Angular Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Dynamic Styling in Templates
Angular lets you bind classes and inline styles to component state so the UI updates automatically as data changes.
Single Class Binding
Use [class.name] to toggle one CSS class based on a boolean expression.
<div [class.active]="isActive">Item</div>
// component
isActive = true;Multiple Classes with ngClass
ngClass applies several classes at once, using an object of class names mapped to booleans.
<div [ngClass]="{ active: isActive, disabled: isDisabled }">
Item
</div>ngClass with Arrays and Strings
ngClass also accepts a string of class names or an array.
<div [ngClass]="'box highlighted'"></div>
<div [ngClass]="['box', 'rounded']"></div>Single Style Binding
Use [style.property] to bind one inline CSS property to a value.
<p [style.color]="textColor">Hello</p>
// component
textColor = "tomato";Style Bindings with Units
Append a unit suffix to bind numeric values with units like pixels or percent.
<div [style.width.px]="boxWidth"></div>
<div [style.height.%]="boxHeight"></div>
// component
boxWidth = 200;
boxHeight = 50;Multiple Styles with ngStyle
ngStyle sets several inline styles at once from an object.
<div [ngStyle]="{ color: textColor, 'font-size.px': size }">
Styled
</div>Class Binding Wins on Conflict
When static and bound classes overlap, Angular merges them; the binding controls whether the dynamic class is present without removing static ones.
<div class="card" [class.active]="isActive"></div>
<!-- card always present; active toggles -->Reacting to State
Bindings re-evaluate during change detection, so updating a component property instantly restyles the element.
toggle() {
this.isActive = !this.isActive;
}Choosing Class vs Style
Prefer class bindings with CSS rules for maintainability; reserve direct style bindings for truly dynamic values like a computed width or color.
With Signals
Class and style bindings work with signals too; just call the signal in the template expression.
<div [class.active]="isActive()"></div>
// component
isActive = signal(true);Quick Check
Test your understanding of dynamic classes and styles.
Recap
Toggle one class with [class.name] or many with ngClass; set one style with [style.prop] (with optional unit) or many with ngStyle. Bindings react to state, including signals, automatically.
Frequently asked questions
Is the “Dynamic Classes and Styles” lesson free?
Yes — the full text of “Dynamic Classes and Styles” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “Dynamic Classes and Styles”?
Bind classes and styles reactively. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Dynamic Classes and Styles” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Component-Scoped Styles
- View Encapsulation Modes
- Host and Host-Context Styling
- Dynamic Classes and Styles