Angular PrimeNG Table Templating

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 learn about Angular PrimeNG Table Templating.

The Table is used to display data in tabular format. The Templates in the Table provide customization. They provide total control over the Table presentation and the table handles the sorting, filtering, pagination, etc. This speeds up development without sacrificing flexibility.

Angular PrimeNG Table Templating:

The templates are used to put some content on some pre-structured containers. The table provides templates to customize the content of various sections such as captions and summaries. Table templates are discussed below: 

• caption: It is the caption of the table.
• header: It is the header of the table.
• body: It is the content of the body.
• summary: It is the summary section displayed below the table.

Syntax:

<p-table 
    [value]="...">
    <ng-template pTemplate="...">
        ......
    </ng-template>
</p-table>

Creating Angular application & module installation:

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

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

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

Project Structure: It will look like the following:

Step to run the application: Run the below command to see the output

ng serve --save

Example 1: In this example, we will learn about header and body template.

• app.component.html:

HTML

<div style="width: 60%;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>
        Angular PrimeNG Table Templating
    </h2>
    <p-table [value]="tutorials">
        <ng-template pTemplate="header">
            <tr>
                <th>Title</th>
                <th>Category</th>
                <th>Rating</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-tutorial>
            <tr>
                <td>{{tutorial.title}}</td>
                <td>{{tutorial.category}}</td>
                <td>{{tutorial.rating}}</td>
            </tr>
        </ng-template>
    </p-table>
</div>

• app.component.ts:

Javascript

import { Component, OnInit, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';
import { PrimeNGConfig } from 'primeng/api';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    tutorials: Tutorial[]=[];
    clonedTutorials: { [s: string]: Tutorial } = {};
    constructor(private primengConfig: PrimeNGConfig) { }

    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,
            },

        ];

        this.primengConfig.ripple = true;
    }
}

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 { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { MultiSelectModule } from 'primeng/multiselect';
import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        MultiSelectModule,
        ButtonModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Example 2: In this example, we will learn about caption and summary template.

• app.component.html:

HTML

<div style="width: 60%;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>
        Angular PrimeNG Table Templating
    </h2>
    <p-table [value]="tutorials">
        <ng-template pTemplate="caption">
            Course Description
        </ng-template>
        <ng-template pTemplate="header">
            <tr>
                <th>Title</th>
                <th>Category</th>
                <th>Rating</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-tutorial>
            <tr>
                <td>{{tutorial.title}}</td>
                <td>{{tutorial.category}}</td>
                <td>{{tutorial.rating}}</td>
            </tr>
        </ng-template>
        <ng-template pTemplate="summary">
            Happy Learning!!
        </ng-template>
    </p-table>
</div>

• app.component.ts:

Javascript

import { Component, OnInit, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';
import { PrimeNGConfig } from 'primeng/api';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    tutorials: Tutorial[]=[];
    clonedTutorials: { [s: string]: Tutorial } = {};
    constructor(private primengConfig: PrimeNGConfig) { }

    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,
            },

        ];

        this.primengConfig.ripple = true;
    }
}

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 { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { MultiSelectModule } from 'primeng/multiselect';
import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        MultiSelectModule,
        ButtonModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

Reference: https://primefaces.org/primeng/table/templating