Angular PrimeNG FilterService Built-in Constraints
Last Updated :
26 Apr, 2025
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 Built-in Constraints.
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. The BuiltIn constraints help to filter the contents without creating the constraints as they are predefined and work on any datatype.
Syntax:
<p-columnFilter
type="..."
[field]="..."
[matchModeOptions]="...">
</p-columnFilter>
Angular PrimeNG FilterService Component Built-in Constraints properties:
- startsWith: It checks whether the value starts with the filter value.
- contains: It checks whether the value contains the filter value.
- endsWith: It checks whether the value ends with the filter value
- equals: It checks whether the value equals the filter value
- notEquals: It checks whether the value does not equal the filter value
- in: It checks whether the value contains the filter value
- lt: It checks whether the value is less than the filter value
- lte: It checks whether the value is less than or equal to the filter value
- gt: It checks whether the value is greater than the filter value
- gte: It checks whether the value is greater than or equal to the filter value
- is: It checks whether the value equals the filter value, an alias to equals
- isNot: It checks whether the value does not equal the filter value, an alias to notEquals.
- before: It checks whether the date value is before the filter date.
- after: It checks whether the date value is after the filter date.
In the app.component.ts, use built-in constraints as follows:
this.filterService.filters.startsWith(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: The project structure will look like the following:
Steps to run the application: Run the below command to see the output
ng serve --save
Example 1: In the following example, we have a table with Built-in constraints in the filter with starts with and contains constraints.
HTML
<h1 style="color: green; text-align: center;">GeeksforGeeks</h1>
<h3>Angular PrimeNG FilterService Built-in Constraints</h3>
<p-table #dt [columns]="cols" [value]="tutorials"
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>
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" }
];
this.matchModeOptions = [
{ label: "Starts With", value: FilterMatchMode.STARTS_WITH },
{ label: "Contains", value: FilterMatchMode.CONTAINS }
];
}
}
export interface Tutorial {
title?: string;
category?: string;
rating?: number;
}
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 { 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: Below is another example that illustrates the use of Angular PrimeNG FilterService Built-in Constraints in which we have lesser than, greater than, and equal constraints.
HTML
<h1 style="color: green; text-align: center;">GeeksforGeeks</h1>
<h3>Angular PrimeNG FilterService Built-in Constraints</h3>
<p-table #dt [columns]="cols" [value]="tutorials"
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>
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" }
];
this.matchModeOptions = [
{ label: "Less than", value: FilterMatchMode.LESS_THAN },
{
label: "Less than or equal",
value: FilterMatchMode.LESS_THAN_OR_EQUAL_TO
},
{ label: "Greater than", value: FilterMatchMode.GREATER_THAN },
{
label: "Greater than or equal",
value: FilterMatchMode.GREATER_THAN_OR_EQUAL_TO
},
{ label: "Equals", value: FilterMatchMode.EQUALS }
];
}
}
export interface Tutorial {
title?: string;
category?: string;
rating?: number;
}
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 { 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: https://primefaces.org/primeng/filterservice
Similar Reads
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.
7 min read
Angular PrimeNG Form KeyFilter Built-in Filters 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. In this article, we will see how to use the KeyFilter Built-in Filters Component in Angular PrimeNG.
3 min read
Angular PrimeNG KeyFilter 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. In this article, we will know how to use the KeyFilter component in angular primeNG. KeyFilter compo
2 min read
Angular PrimeNG Form Listbox Filter 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. In this article, we will see how to use the Form ListBox Filter Component in Angular PrimeNG. The Li
3 min read
Angular PrimeNG OrderList Filtering
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. In this article, we will see the Angular PrimeNG OrderList Filtering. OrderList Component is used to
3 min read
Angular PrimeNG BlockUI Custom Content
Angular PrimeNG is a front-end UI toolkit for Angular applications. It has a wide variety of angular components that helps developers to build web applications in less time as they don't have to make everything from scratch. In this article, we will see the Angular PrimeNG BlockUI Custom Content. Th
3 min read
Angular PrimeNG Form KeyFilter Custom Filter 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. In this article, we will see how to use the Form KeyFilter Custom Filter Component in Angular PrimeN
3 min read
Angular PrimeNG PickList Filtering
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.
5 min read
Building a Search Functionality using AngularJS Services
AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. An Angular service is a broad category that consists of an
5 min read
Angular PrimeNG DataView 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. In this article, we will know how to use the dataView component in Angular PrimeNG. We will also lea
7 min read