Angular PrimeNG FilterService Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we are going to learn Angular PrimeNG FilterService Component.

The FilterService is a helper utility to filter the rows of data or collections of the data and display the result. We can also use custom filters in the FilterService.

Angular PrimeNG FilterService Component Built-in Constraints:

• startsWith(value, filter, filterLocale): It checks whether the value starts with the filter value.
• contains(value, filter, filterLocale): It checks whether the value contains the filter value.
• endsWith(value, filter, filterLocale): It checks whether the value ends with the filter value
• equals(value, filter, filterLocale): It checks whether the value equals the filter value
• notEquals(value, filter, filterLocale): It checks whether the value does not equal the filter value
• in(value, filter[], filterLocale): It checks whether the value contains the filter value
• lt(value, filter, filterLocale): It checks whether the value is less than the filter value
• lte(value, filter, filterLocale): It checks whether the value is less than or equal to the filter value
• gt(value, filter, filterLocale): It checks whether the value is greater than the filter value
• gte(value, filter, filterLocale): It checks whether the value is greater than or equal to the filter value
• is(value, filter, filterLocale): It checks whether the value equals the filter value, an alias to equals
• isNot(value, filter, filterLocale): It checks whether the value does not equal the filter value, an alias to notEquals.
• before(value, filter, filterLocale): It checks whether the date value is before the filter date.
• after(value, filter, filterLocale): It checks whether the date value is after the filter date.

FilterService API:

• filter(value[], fields[], filterValue, filterLocale, filterMatchMode): It checks whether the property values of the given value collection matches the filter.
• filters: It is the property to access constraints collection.
• register(name, fn): It registers a new constraint in filters.

Syntax:

 this.filterService.filters.equals(value, 'gfg');  

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new geeks_angular

Step 2: After creating your project folder i.e. geeks_angular, move to it using the following command.

cd geeks_angular

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure:

Example 1: In the following example, we have a Table and we can filter the data with the help of a filter service.

• app.component.html

HTML

<h1 style="color:green;text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG FilterService Component</h3>
<p-table #dt [columns]="cols"
         [value]="tutorials"
         [paginator]="true"
         [rows]="10"
         responsiveLayout="scroll">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
        <tr>
            <th *ngFor="let col of columns">
                <p-columnFilter type="text"
                    field]="col.field"
                    [matchModeOptions]="matchModeOptions">
                </p-columnFilter>
            </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>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { SelectItem, FilterService,
    FilterMatchMode } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    cols: any[];
    tutorials: Tutorial[];
    matchModeOptions: SelectItem[];

    constructor(private filterService: FilterService) { }

    ngOnInit() {
        this.tutorials = [
            {
                title: 'Queue',
                category: 'Data Structure',
                rating: 8,
            },
            {
                title: 'Circularly LinkedList',
                category: 'Data Structure',
                rating: 1,
            },
            {
                title: 'Doubly LinkedList',
                category: 'Data Structure',
                rating: 3,
            },
            {
                title: 'Singly LinkedList',
                category: 'Data Structure',
                rating: 5,
            },
            {
                title: 'Doubly Ended Queue',
                category: 'Data Structure',
                rating: 10,
            },
            {
                title: 'Binary Search Tree',
                category: 'Data Structure',
                rating: 2,
            },
            {
                title: 'Red Black Tree',
                category: 'Data Structure',
                rating: 9,
            },
            {
                title: 'Breadth First Search',
                category: 'Graph',
                rating: 6,
            },
            {
                title: "Floyd's Cycle",
                category: 'Algorithm',
                rating: 7,
            },
            {
                title: 'Travelling Salesman Problem',
                category: 'Algorithm',
                rating: 4,
            },
            {
                title: 'Bellman Ford',
                category: 'Graph',
                rating: 8,
            },
            {
                title: 'KMP Algorithm',
                category: 'String',
                rating: 10,
            },
        ];

        this.cols = [
            { field: 'title', header: 'Title' },
            { field: 'category', header: 'Category' },
            { field: 'rating', header: 'Rating' },
        ];
        const customFilterName = 'custom-equals';

        this.filterService.register(customFilterName,
            (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.matchModeOptions = [
            { label: 'Starts With',
            value: FilterMatchMode.STARTS_WITH },
            { label: 'Contains',
            value: FilterMatchMode.CONTAINS },
        ];
    }
}

export interface Tutorial {
    title?: string;
    category?: string;
    rating?: number;
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { ToastModule } from 'primeng/toast';
import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { InputTextModule } from 'primeng/inputtext';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        AutoCompleteModule,
        FormsModule,
        TableModule,
        InputTextModule,
        HttpClientModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: In the following example, we have a custom filter service component for rating and checking if it odd number or not.

• app.component.html

HTML

<h1 style="color:green;text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG FilterService Component</h3>
<p-table #dt [columns]="cols"
         [value]="tutorials"
         [paginator]="true"
         [rows]="10"
         responsiveLayout="scroll">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </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">
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-table>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { SelectItem, FilterService,
    FilterMatchMode } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    cols: any[];
    tutorials: Tutorial[];
    matchModeOptions: SelectItem[];

    constructor(private filterService: FilterService) { }

    ngOnInit() {
        this.tutorials = [
            {
                title: 'Queue',
                category: 'Data Structure',
                rating: 8,
            },
            {
                title: 'Circularly LinkedList',
                category: 'Data Structure',
                rating: 1,
            },
            {
                title: 'Doubly LinkedList',
                category: 'Data Structure',
                rating: 3,
            },
            {
                title: 'Singly LinkedList',
                category: 'Data Structure',
                rating: 5,
            },
            {
                title: 'Doubly Ended Queue',
                category: 'Data Structure',
                rating: 10,
            },
            {
                title: 'Binary Search Tree',
                category: 'Data Structure',
                rating: 2,
            },
            {
                title: 'Red Black Tree',
                category: 'Data Structure',
                rating: 9,
            },
            {
                title: 'Breadth First Search',
                category: 'Graph',
                rating: 6,
            },
            {
                title: "Floyd's Cycle",
                category: 'Algorithm',
                rating: 7,
            },
            {
                title: 'Travelling Salesman Problem',
                category: 'Algorithm',
                rating: 4,
            },
            {
                title: 'Bellman Ford',
                category: 'Graph',
                rating: 8,
            },
            {
                title: 'KMP Algorithm',
                category: 'String',
                rating: 10,
            },
        ];

        this.cols = [
            { field: 'title', header: 'Title' },
            { field: 'category', header: 'Category' },
            { field: 'rating', header: 'Rating' },
        ];
        const customFilterName = 'custom-equals';

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

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

            return value % 2 === 1;
        });

        this.matchModeOptions = [
            { label: 'Custom Equals',
            value: customFilterName },
            { label: 'Starts With',
            value: FilterMatchMode.STARTS_WITH },
            { label: 'Contains',
            value: FilterMatchMode.CONTAINS },
        ];
    }
}

export interface Tutorial {
    title?: string;
    category?: string;
    rating?: number;
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { ToastModule } from 'primeng/toast';
import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { InputTextModule } from 'primeng/inputtext';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        AutoCompleteModule,
        FormsModule,
        TableModule,
        InputTextModule,
        HttpClientModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/filterservice