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.
- app.component.html:
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>
|
- app.components.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" }
];
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 { 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.
- app.components.html:
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>
|
- 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" }
];
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;
} |
- 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 { 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