how to dynamically change background color of a button in angular material without the need to click on it

Question

I'm trying to construct a web page using angular material where I have a drop-down select element and a bunch of FAB buttons to show status. What I would like to do is that if a click on the dropdown list and select an item. The background color of the button is changed based on the item I select.

I've found a few solutions to change color(scheme) based on button click event. Is there a way to trigger the background color change based on the drop-down list selection?

Thanks

score 0 · Answer 1 · answered Aug 31 '21 at 20:36

0

You can trigger the function that changes the button color each time the item selected has been changed using this code :

  <mat-select (selectionChange)="setButtonColor($event.value)"
              name="color" formControlName="type" >
       <mat-option *ngFor="let color of colors" 
                   [value]="color">{{type}}
        </mat-option>
   </mat-select>

   <button mat-button [ngStyle]="{'background-color':bgColor}">
      Button
   </button>

your Typescript file should contain a variable bgColor to hold the selected value string and the setButtonColor function that change the value of this variable

bgColor = 'blue'; // blue is the default color in this case

setButtonColor(color){
    bgColor = color;
}

answered Aug 31 '21 at 20:36

ABDERRAZZAQ LAANAOUI

161
2
6

I've got an error in html file on the line of – Jin Ma Aug 31 '21 at 21:45
let colors: string[] = ['green', 'red', 'orange']; bgColor = 'green'; setButtonColor(color) { bgcolor = color; } – Jin Ma Aug 31 '21 at 21:50
@JinMa make sure `setButtonColor` is public: `public setButtonColor(color) { bgcolor = color; }` – Searnd Aug 31 '21 at 23:05

score 0 · Answer 2 · answered Sep 01 '21 at 03:43

Angular Mat Select Multiple selectionchange finding which option was changed

The answer to the above question helped me. https://stackblitz.com/edit/angular-1e9gsd-34hrwg?file=app/select-overview-example.html I tweaked my code based on the code shown above and it all worked.

how to dynamically change background color of a button in angular material without the need to click on it

2 Answers2