[Fixed] How to change the styles Dynamically in aggrid with an external button click?

Issue

cellClassRules: {‘makeRed’:’!this.flag’}

i want this flag variable based on a button click and then it should make changes in the grid

In Angular 8

Solution

On click of the button, you could set a variable in your component class to true. Something like :

xyz.component.html
<button (click) = "onButtonClick()"> My button </button>

xyz.component.ts

public buttonClicked = false;

onButtonClick()
{
   this.buttonClicked = true;
}

Then in your column defs, you can do something like :

cellClassRules: {'makeRed':this.buttonClicked}

where makeRed is a CSS class that defines your custom properties.

Note: If you wish to do this for a button toggled behavior, then you’d need to do something like :

onButtonClick()
{
   this.buttonClicked = this.buttonClicked ? !this.buttonClicked : this.buttonClicked
}


cellClassRules: {
'makeRed':this.buttonClicked,
'makeGreen': !this.buttonClicked,
}