FilterService

FilterService is a helper utility to filter collections against constraints.


import { FilterService } from 'primeng/api';

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
    }
}

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

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

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

YearBrandColorVin

<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'" />
            </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>

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

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