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 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:

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;">
    GeeksforGeeks
</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;">
    GeeksforGeeks
</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