BaseFilterPanel

Since v0.13.0

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/features/filtering';

@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.

Property Details

params

Filter panel parameters injected by the grid’s filtering plugin.

Provides access to:

• field — the column field name
• column — full column configuration
• uniqueValues — distinct values in the column
• excludedValues — currently excluded values (set filter)
• searchText — current search text
• applySetFilter(excluded) — apply a set-based (include/exclude) filter
• applyTextFilter(operator, value, valueTo?) — apply a text/number filter
• clearFilter() — clear the filter for this column
• closePanel() — close the filter panel

---

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

---