In your TypeScript/JavaScript have a property under your Page class that will hold the dynamic value. For instance we will call it buttonColor.
this.buttonColor = 1;
Change that value to whatever you want it at any time you would like to change the color of that button.
Then in your html do the follwing:<button [ngClass]="{primary: buttonColor ==1, secondary: buttonColor==2, danger: buttonColor=3}">Test button</button>
- Instead of primary, secondary, and danger you can use any other button class or use your own classes.
- Instead of setting the value of our property (
this.buttonColor) to a number, you can set it to anything else that suits your needs. I recommend a boolean if you only have two options. Or a string if you need to remember what each option refers to (numbers can get confusing).
--
Alternatively you may use ngStyle which will allow you to add dynamic styling to an object. Example:
this.buttonColor = '#f0f0f0';
<button [ngStyle]="{'background-color': buttonColor}">Test</button>