Search code examples
angularangular-materialconditional-statementsangular-components

Conditional button color attr in Angular Material (Components)

I have a component that takes an Input.. @Input() coDeliveryCandidates: DeliverySlotView[];

this is used in the template:

<ng-container *ngFor="let coDeliverySlotView of (coDeliveryCandidates | async)">
  <button
    mat-raised-button
    [color]=""
  >
    {{ label  }}
  </button>
</ng-container>

color attribute takes a string as value and I would like to do something like:

[color]="{
  black: coDeliverySlotView.slotId === bookedSlot.slotId,
  grey: !coDeliverySlotView.slotId === bookedSlot.slotId
}"

Here I use the same syntax as ngClass but I guess it's not supported in that way.. so what other similar ways are there? :)

Solution

  • Can just use the ternary operator

    [color]="coDeliverySlotView.slotId === bookedSlot.slotId ? 'black' : 'grey'"