Angular 10: Bindings de clase y estilo
easy⏱ 5 mincourseangular
[class.x] y [style.y]: bindings de un solo valor
[class.active]="isSelected()" agrega la clase CSS literal active al elemento exactamente mientras isSelected() es verdadera, y la quita en caso contrario — Angular maneja el agregado/quitado por vos. [style.color]="priorityColor()" setea el style.color inline del elemento directamente a partir de una expresión, y [style.fontSize.px]="size()" incluso te permite adjuntar un sufijo de unidad. Ambos son bindings de un solo valor: una clase, una propiedad CSS, por binding.
<li
[class.active]="isSelected()"
[style.color]="priorityColor()"
>
{{ title() }}
</li>
[ngClass] y [ngStyle]: varios a la vez
[ngClass] acepta un objeto cuyas claves son nombres de clase y cuyos valores son booleanos — cada clave verdadera se convierte en una clase aplicada en un solo binding, en lugar de escribir un [class.x] separado para cada una. [ngStyle] funciona igual para propiedades CSS, aceptando un objeto de pares nombre-de-propiedad/valor. Usá [class.x]/[style.y] para una o dos condiciones, y [ngClass]/[ngStyle] cuando estés manejando varias a la vez — ambos necesitan NgClass/NgStyle importados de @angular/common en componentes standalone.
<li [ngClass]="{ active: isSelected(), urgent: priority() === 'high' }">
{{ title() }}
</li>
Construí TaskBoard
En PriorityTagComponent, vinculá [style.color] a un color derivado de un input priority, y [class.selected] más [ngClass] a un input selected. En TaskBoardComponent, renderizá las tareas con @for (task of tasks(); track task.id), conectá (click) para seleccionar una tarea, y agregá un computed() que cuente cuántas tareas son de prioridad 'high'.