Angular PrimeNG Table Match modes
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 Table Match modes.
The Match Modes are used to filter the data based on their data types. Angular PrimeNG filter provides different match modes for different data types. For example, text type displays string matches, and startsWith matches the starting string matches.
Text Match Mode Options:
- FilterMatchMode.STARTS_WITH
- FilterMatchMode.CONTAINS
- FilterMatchMode.NOT_CONTAINS
- FilterMatchMode.ENDS_WITH
- FilterMatchMode.EQUALS
- FilterMatchMode.NOT_EQUALS
Numeric Match Mode Options:
- FilterMatchMode.EQUALS
- FilterMatchMode.NOT_EQUALS
- FilterMatchMode.LESS_THAN
- FilterMatchMode.LESS_THAN_OR_EQUAL_TO
- FilterMatchMode.GREATER_THAN
- FilterMatchMode.GREATER_THAN_OR_EQUAL_TO
Date Match Mode Options:
- FilterMatchMode.DATE_IS,
- FilterMatchMode.DATE_IS_NOT
- FilterMatchMode.DATE_BEFORE
- FilterMatchMode.DATE_AFTER
Syntax:
Use the match modes as follows:
this.matchModeOptions = [ { label: 'Starts With', value: FilterMatchMode.STARTS_WITH }, { label: 'Contains', value: FilterMatchMode.CONTAINS }, { label: 'Ends With', value: FilterMatchMode.ENDS_WITH }, { label: 'Equals', value: FilterMatchMode.* }, ];
And apply it as follows:
<p-columnFilter type="text" [field]="col.field" [matchModeOptions]="matchModeOptions" > </p-columnFilter>
Creating Angular application & Module Installation:
Step 1: Create an Angular application using the following command.
ng new Beginner_angular
Step 2: After creating your project folder i.e. Beginner_angular, move to it using the following command.
cd Beginner_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:
Example 1: In this example, we are creating a table and and adding filter options.
app.component.html
HTML
< h1 style = "color:green;text-align:center;" > w3wiki </ h1 > < h3 >Angular PrimeNG Table Match modes</ 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 ' }, ]; this.matchModeOptions = [ { label: ' Starts With ', value: FilterMatchMode.STARTS_WITH }, { label: ' Contains ', value: FilterMatchMode.CONTAINS }, { label: ' Ends With ', value: FilterMatchMode.ENDS_WITH }, { 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 { 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 will use the numeric value match modes in the Rating column.
app.component.html
HTML
< h1 style = "color:green;text-align:center;" > w3wiki </ h1 > < h3 >Angular PrimeNG Table Match modes</ 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 ' }, ]; this.matchModeOptions = [ { label: ' LESS_THAN ', value: FilterMatchMode.LESS_THAN }, { label: ' LESS_THAN_OR_EQUAL_TO ', value: FilterMatchMode.LESS_THAN_OR_EQUAL_TO, }, { label: ' GREATER_THAN ', value: FilterMatchMode.GREATER_THAN }, { label: ' GREATER_THAN_OR_EQUAL_TO', value: FilterMatchMode.GREATER_THAN_OR_EQUAL_TO, }, ]; } } 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: https://primefaces.org/primeng/table