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


<p-table #dt [columns]="cols" [value]="cars" [paginator]="true" [rows]="10" responsiveLayout="scroll">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                &#123;&#123;col.header&#125;&#125;
            </th>
        </tr>
        <tr>
            <th *ngFor="let col of columns">
                <p-columnFilter type="text" [field]="col.field" [matchModeOptions]="matchModeOptions" [matchMode]="'custom-equals'"></p-columnFilter>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of columns">
                &#123;&#123;rowData[col.field]&#125;&#125;
            </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.