BaseFilterPanel

Base class for Angular filter panel components.

Provides a ready-made params input and common lifecycle helpers (applyAndClose, clearAndClose) so consumers only need to implement their filter logic in applyFilter().

Usage

import { Component, viewChild, ElementRef } from '@angular/core';
import { BaseFilterPanel } from '@toolbox-web/grid-angular';

@Component({
  selector: 'app-text-filter',
  template: `
    <input #input (keydown.enter)="applyAndClose()" />
    <button (click)="applyAndClose()">Apply</button>
    <button (click)="clearAndClose()">Clear</button>
  `
})
export class TextFilterComponent extends BaseFilterPanel {
  input = viewChild.required<ElementRef<HTMLInputElement>>('input');

  applyFilter(): void {
    this.params().applyTextFilter('contains', this.input().nativeElement.value);
  }
}

Template Syntax

The grid’s filtering plugin will mount this component and provide params automatically. No manual wiring is required:

gridConfig = {
  columns: [
    { field: 'name', filterable: true, filterPanel: TextFilterComponent },
  ],
};

Properties

Property	Type	Description
params	InputSignal<FilterPanelParams>	Filter panel parameters injected by the grid’s filtering plugin.

Methods

applyFilter()

Implement this to apply your filter logic.

Called by applyAndClose before closing the panel. Use this.params() to access the filter API.

applyFilter(): void

---

applyAndClose()

Apply the filter then close the panel.

Calls applyFilter followed by params().closePanel(). Bind this to your “Apply” button or Enter key handler.

applyAndClose(): void

---

clearAndClose()

Clear the filter then close the panel.

Calls params().clearFilter() followed by params().closePanel(). Bind this to your “Clear” / “Reset” button.

clearAndClose(): void

---