Angular PrimeNG FilterService Custom Constraint

 

PrimeNG is a popular open-source UI component library for Angular applications. It provides a rich set of reusable and customizable components that enhance the user interface and user experience of Angular applications. PrimeNG follows modern design principles and offers a wide range of components for various purposes, including data presentation, forms, dialogs, charts, menus, and more. In this article we are going to learn Angular PrimeNG FilterService Custom Constraint.

The PrimeNG FilterService is a utility service provided by the PrimeNG UI component library for Angular applications. It is used to perform filtering operations on data within components like data tables, lists, or grids. It supports various filter constraints such as "contains," "equals," "starts with," and more. The FilterService can be integrated with PrimeNG components that support filtering, such as the p-table, p-dataList, or p-dataGrid components

Angular PrimeNG's custom constraints in the FilterService provide you with the ability to define and use your own filtering criteria and rules. It helps you to create advanced and specialized filters to effectively manipulate and present your data in PrimeNG components.

To create a custom constraint, you need to implement the FilterConstraint interface provided by PrimeNG. This interface specifies the methods required to apply the filter based on your custom criteria. Once you have created and registered your custom constraint with the FilterService, you can use it in conjunction with PrimeNG components that support filtering. This allows you to apply your custom filter rules to the data displayed in those components.

Syntax:

<p-columnFilter 
type="text" 
[field]="field" 
[matchModeOptions]="matchModeOptions" 
[matchMode]="'custom-constraint-name'">
</p-columnFilter>

We can implement custom constraint filter by using [matchMode] attribute.

Angular application creation:

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

ng new primeng_customfilter

Step 2: A Navigate into project folder by using the following command.

cd primeng_customfilter

Step 3: Install PrimeNG in your project.

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

Project Structure: 

Run the application: Trigger the below command to run the project, and hit given url in browser

ng serve

Example 1:

Let us build an app with data table. And implement custom filter "custom-equal" along with built-in constraints "starts with" and "contains".

• app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {TableModule} from 'primeng/table';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {AutoCompleteModule} from 'primeng/autocomplete';
import {InputTextModule} from 'primeng/inputtext';

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

• app.component.html:

<p-table #dt [columns]="cols" [value]="movies" [paginator]="true" [rows]="10">
  <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:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

  title = 'primeng_customfilter';
  cols: any[] = [];
  movies: any[] = [];
  matchModeOptions: SelectItem[] = [];

  constructor(
    private filterService: FilterService
  ) {}

  ngOnInit(): void {
    const customFilterName = "custom-equals";
    this.cols = [
      { field: 'id', header: 'ID' },
      { field: 'name', header: 'Movie Name' },
      { field: 'rating', header: 'Rating' },
    ];

    this.movies = [
      {"id": 1, "name": "Avengers End game", "rating": 8.4},
      {"id": 2, "name": "Avengers Infinity War", "rating": 8.4},
      {"id": 3, "name": "Spiderman Noway Home", "rating": 8.3},
      {"id": 4, "name": "Iron Man", "rating": 7.9},
      {"id": 5, "name": "Captain America", "rating": 7.8},
      {"id": 6, "name": "Ant Man", "rating": 7.3},
      {"id": 7, "name": "Thor Dark World", "rating": 6.8},
      {"id": 8, "name": "Eternals", "rating": 6.3}
    ];

    this.filterService.register(
      customFilterName,
      (value: any, filter: any): 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: "Custom Equals", value: customFilterName },
      { label: "Starts With", value: FilterMatchMode.STARTS_WITH },
      { label: "Contains", value: FilterMatchMode.CONTAINS }
    ];
  }
}

Output: