Dynamic Classes and Styles
Bind classes and styles reactively.
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;All lessons in this course
- Component-Scoped Styles
- View Encapsulation Modes
- Host and Host-Context Styling
- Dynamic Classes and Styles