Angular Class and Style Binding

Short summary

Angular enables dynamic CSS class and style binding directly in templates using bracket syntax. Bind individual classes with [class.active]="isActive" or multiple classes with [class]="{object}", and apply styles with [style.property] or [style]="{object}" bindings. Static classes and dynamic bindings coexist safely — Angular merges them independently, managing only what each binding explicitly controls while preserving all other classes and styles.

• •Single-class binding via [class.name]="expr" and multi-class binding via [class]="{obj}"
• •Style binding supports both single properties [style.prop]="val" and objects [style]="{obj}"
• •Static classes and dynamic bindings merge additively — Angular never clears unmanaged classes or styles

Generated with AI, which can make mistakes.