Custom Filter: Can I Have Custom Buttons For Filter?

I am trying to have my own custom filter on ag-grid angular. Apart from Apply button, I also want to have other buttons for the filter. i.e. if I can explain this in some sort of U

Solution 1:

Achieved it after few hours of search and trial-error.

Have a look at the example given here: ag-Grid Angular Custom Filter Component Have a look at the PartialMatchFilterComponent and its code.

After some code updates for template and component, we can achieve it.

Update the template:

<button (click)="apply()">Apply</button><button (click)="clear()">Clear</button><!-- any other buttons you want to keep -->

Little update in the component code: Just need to call this.params.filterChangedCallback() on Apply button click.

apply(): void {
    this.params.filterChangedCallback();
}
clear(): void {
    this.text = '';
    this.params.filterChangedCallback();
}
onChange(newValue): void {
    if (this.text !== newValue) {
        this.text = newValue;
        // this.params.filterChangedCallback(); - remove
    }
}