Conditional button color attr in Angular Material (Components)

Question

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? :)

abney317 · Accepted Answer · 2019-09-16 20:39:51Z

11

Can just use the ternary operator

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

answered Sep 16, 2019 at 20:39

abney317

8,5927 gold badges36 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muhammed Albarmavi Over a year ago

👋 angular material has some preset color like primary,accent,warn that why 'black' , 'gray' will not work ,you are correct in case this was a preset 🙂

javipipero · Accepted Answer · 2020-09-25 03:33:41Z

3

<button mat-button [color]=" boolean_condition ? 'accent' : 'primary'">

This is a possible easy example using the color of material.

answered Sep 25, 2020 at 3:33

javipipero

899 bronze badges

1 Comment

ZAJ Over a year ago

what if we have more then 2 condition, in my case I have 3 condition how will that look like??

Muhammed Albarmavi · Accepted Answer · 2019-09-17 11:58:08Z

1

material design has built in three color called primary,accent,warn and base of the value you pass to color will set the need class , in this case the easy way to change the color is defined a class without set the color property

style.scss

.black {
  &.mat-raised-button.mat-button-base {
    background: black ;
    color:#fff ;
  }
}

.gray {
  &.mat-raised-button.mat-button-base {
    background: #ccc ;
    color:#555 ;
  }
}
.orange {
  &.mat-raised-button.mat-button-base {
    background: orange ;
    color:#fff ;
  }
}

template

<button mat-raised-button class="black">black</button>
<button mat-raised-button class="gray">gray</button>
<button mat-raised-button class="orange">orange</button>

set the class base of condition by ngClass directive and boolean property like this

 <button mat-raised-button 
        [ngClass]="{'black': isBlack , 'gray' : !isBlack}" (click)="isBlack =!isBlack" >
        click to toggle
 </button>

demo 🚀🚀

edited Sep 17, 2019 at 11:58

answered Sep 16, 2019 at 21:09

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

1 Comment

Mackelito Over a year ago

We already have our own theme and the colors are present.. the question was simple about conditional...

Fahimeh Ahmadi · Accepted Answer · 2022-07-31 17:19:52Z

0

I used this method

Component

isActive = false;

html

<input type="checkbox" [(ngModel)]="isActive">    

<button mat-raised-button [color]="isActive ? 'warn' : 'warn'">
        {{isActive ? 'warn' : 'warn'}}
</button>

answered Jul 31, 2022 at 17:19

Fahimeh Ahmadi

1,04312 silver badges14 bronze badges

Collectives™ on Stack Overflow

Conditional button color attr in Angular Material (Components)

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related