Source: https://primeng.org/filterservice

Primary

Surface

PresetsAuraMaterialLaraNora

Ripple

RTL
v20
- v20
- v19
- v18
- v17

FilterService

FilterService is a helper utility to filter collections against constraints.

Import #

import { FilterService } from 'primeng/api';

Usage #

FilterService needs to be injected into your component. Filters are accessed with FilterService.filters.

export class FilterServiceDemo implements OnInit {

    constructor(private filterService: FilterService) {}

    ngOnInit() {
        const value = 'PrimeNG';

        this.filterService.filters.equals(value, 'NG');                            //false
        this.filterService.filters.equals(value, 8);                               //false
        this.filterService.filters.equals(value, new Date());                      //false
        this.filterService.filters.contains(value, 'NG');                          //true
        this.filterService.filters.startsWith(value, 'NG');                        //false
        this.filterService.filters.endsWith(value, 'NG');                          //true
        this.filterService.filters.lt(10, 20);                                     //true
        this.filterService.filters.gt(50, 20);                                     //true
        this.filterService.filters.in(value, ['PrimeFaces', 'PrimeNG']);           //true
    }
}

Built-in Constraints #

| Name | Parameters | Description | | --- | --- | --- | | startsWith | value: Value to filter filter: Filter value filterLocale: Locale to use in filtering | Whether the value starts with the filter value | | contains | value: Value to filter filter: Filter value filterLocale: Locale to use in filtering | Whether the value contains the filter value | | endsWith | value: Value to filter filter: Filter value filterLocale: Locale to use in filtering | Whether the value ends with the filter value | | equals | value: Value to filter filter: Filter value filterLocale: Locale to use in filtering | Whether the value equals the filter value | | notEquals | value: Value to filter filter: Filter value filterLocale: Locale to use in filtering | Whether the value does not equal the filter value | | in | value: Value to filter filter[]: An array of filter values filterLocale: Locale to use in filtering | Whether the value contains the filter value | | lt | value: Value to filter filter: Filter value filterLocale: Locale to use in filtering | Whether the value is less than the filter value | | lte | value: Value to filter filter: Filter value filterLocale: Locale to use in filtering | Whether the value is less than or equals to the filter value | | gt | value: Value to filter filter: Filter value filterLocale: Locale to use in filtering | Whether the value is greater than the filter value | | gte | value: Value to filter filter: Filter value filterLocale: Locale to use in filtering | Whether the value is greater than or equals to the filter value | | is | value: Value to filter filter: Filter value filterLocale: Locale to use in filtering | Whether the value equals the filter value, alias to equals | | isNot | value: Value to filter filter: Filter value filterLocale: Locale to use in filtering | Whether the value does not equal the filter value, alias to notEquals. | | before | value: Value to filter filter: Filter value filterLocale: Locale to use in filtering | Whether the date value is before the filter date. | | after | value: Value to filter filter: Filter value filterLocale: Locale to use in filtering | Whether the date value is after the filter date. |

Custom Constraints #

FilterService can be extended by adding new constraints using the register function.

this.filterService.register('isPrimeNumber', (value, filter): boolean => { if (filter === undefined || filter === null || filter.trim() === '') { return true; }

    if (value === undefined || value === null) {
        return false;
    }

    return value.toString() === filter.toString();
});

this.filterService.filters['isPrimeNumber'](3);                      //true
this.filterService.filters['isPrimeNumber'](5);                      //true
this.filterService.filters['isPrimeNumber'](568985673);              //false

Table Integration #

A custom equals filter that checks for exact case sensitive value is registered and defined as a match mode of a column filter.

| Year | Brand | Color | Vin | | --- | --- | --- | --- | | | | | | | --- | --- | --- | --- | | 1987 | Fiat | Maroon | ee8a89d8 | | 1968 | Renault | White | 642b3edc | | 1981 | Renault | Black | 19ec7580 | | 1986 | VW | Red | 39980f30 | | 1981 | Fiat | Brown | ec9cc4e4 | | 1965 | VW | Green | 09a06548 | | 2007 | Mercedes | Blue | 05c47246 | | 1962 | Fiat | Green | a9cb87aa | | 1999 | BMW | Yellow | eae758fa | | 1964 | Jaguar | Yellow | 1241c403 |

1 2 3 4 5

<p-table #dt [columns]="cols" [value]="cars" [paginator]="true" [rows]="10" [tableStyle]="{ 'min-width': '75rem' }"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns" [style.width]="'25%'">{{ col.header }}</th> </tr> <tr> <th *ngFor="let col of columns"> <p-columnFilter type="text" [field]="col.field" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-equals'" /> </th> </tr> </ng-template> <ng-template pTemplate="body" let-rowData let-columns="columns"> <tr [pSelectableRow]="rowData"> <td *ngFor="let col of columns">{{ rowData[col.field] }}</td> </tr> </ng-template> </p-table>

FilterService API #

Following is the list of structural style classes, for theming classes visit theming page.

| Name | Parameters | Description | | --- | --- | --- | | filter | value[]: An array of values to filter fields[]: An array of properties in the value object filterValue: Filter value filterMatchMode: Constraint filterLocale: Locale to use in filtering | Whether the property values of the given value collection matches the filter. | | filters | - | Property to access constraints collection. | | register | name: string fn: Filter callback | Registers a new constraint in filters. |

Import
Usage
Built-in Constraints
Custom Constraints
Table Integration
FilterService API

Theme Designer

Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to theme code, cloud storage, and migration assistant.

PrimeNG 20.3.0 by PrimeTek