Angular 10: Class & Style Bindings
easy⏱ 5 mincourseangular
[class.x] and [style.y]: single-value bindings
[class.active]="isSelected()" adds the literal CSS class active to the element exactly while isSelected() is truthy, and removes it otherwise — Angular handles the add/remove for you. [style.color]="priorityColor()" sets the element's inline style.color directly from an expression, and [style.fontSize.px]="size()" even lets you attach a unit suffix. Both are single-value bindings: one class, one CSS property, per binding.
<li
[class.active]="isSelected()"
[style.color]="priorityColor()"
>
{{ title() }}
</li>
[ngClass] and [ngStyle]: many at once
[ngClass] accepts an object whose keys are class names and whose values are booleans — every truthy key becomes an applied class in one binding, instead of writing out a separate [class.x] for each one. [ngStyle] works the same way for CSS properties, accepting an object of property-name/value pairs. Reach for [class.x]/[style.y] for one or two conditions, and [ngClass]/[ngStyle] once you're juggling several at once — both need NgClass/NgStyle imported from @angular/common for standalone components.
<li [ngClass]="{ active: isSelected(), urgent: priority() === 'high' }">
{{ title() }}
</li>
Build TaskBoard
In PriorityTagComponent, bind [style.color] to a color derived from a priority input, and [class.selected] plus [ngClass] to a selected input. In TaskBoardComponent, render tasks with @for (task of tasks(); track task.id), wire (click) to select a task, and add a computed() that counts how many tasks are 'high' priority.