Angular PrimeNG Table Loading Status

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 Angular PrimeNG Table Loading Status.

The Table component shows some data to the user in tabular form. The loading property of the table component is used to show a spinner icon to the user until the table data loads in the background. The loadingIcon property can be used to set a different icon to show to indicate the loading of the data.

Syntax:

<p-table 
    [value]="items" 
    [scrollable]="true" 
    loadingIcon="..." 
    [loading]="...">
    
    <ng-template pTemplate="header">
        ...
    </ng-template>
    
    <ng-template pTemplate="body" let-item>
        ...
    </ng-template>
</p-table>

Creating Angular application and Installing the Modules:

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

ng new myapp

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

cd myapp

Step 3: Install PrimeNG in your given directory.

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

Project Structure: After completing the above steps the project structure will look like the following.

Project Structure

Example 1: This article shows the basic loading status of the table component in Angular PrimeNG.

app.component.html

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Loading Status</h4>

    <p-table
        [value]="items"
        [scrollable]="true"
        [loading]="isLoading">
        <ng-template pTemplate="header">
            <tr>
                <th>S.No</th>
                <th>Item</th>
                <th>Count</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-item>
            <tr>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.count}}</td>

            </tr>
        </ng-template>
    </p-table>

    <button
        pButton
        label="Load"
        (click)="onClick()"
        style="
            position: absolute;
            bottom: 50px;
            right: 0
        ">
    </button>
</div>

app.component.ts

import { Component } from '@angular/core';

interface Item {
    id: Number,
    name: String,
    count: Number
}

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

export class AppComponent {

    isLoading: boolean = true;

    items: Item[] = []

    ngOnInit() {

        this.isLoading = true;

        setTimeout(() => {
            this.items = [
                {
                    id: 1,
                    name: "Pen",
                    count: 9
                },
                {
                    id: 2,
                    name: "Rubber Bands",
                    count: 14
                },
                {
                    id: 3,
                    name: "Carrybag",
                    count: 1
                },
                {
                    id: 4,
                    name: "Spoon",
                    count: 1
                },
                {
                    id: 5,
                    name: "Perfume",
                    count: 2
                },
                {
                    id: 6,
                    name: "Pencil",
                    count: 11
                },
                {
                    id: 7,
                    name: "NoteBook",
                    count: 3
                },
                {
                    id: 8,
                    name: "Facewash",
                    count: 1
                },
            ];

            // Set isLoading to false after 1 seconds
            this.isLoading = false;
        }, 1000);

    }
    //
    onClick() {
        this.items = [];
        this.ngOnInit();
    }

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';


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

export class AppModule { }

Run the Application:

Execute the below command from the root of your project to run the angular application.

ng serve --open

Output:

Example 2: In this example, we specified a custom icon to render while the items are loading.

app.component.html

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Table Loading Status</h4>

    <p-table
        [value]="items"
        [scrollable]="true"
        loadingIcon="pi pi-star pi-spin"
        [loading]="isLoading">
        <ng-template pTemplate="header">
            <tr>
                <th>S.No</th>
                <th>Item</th>
                <th>Count</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-item>
            <tr>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.count}}</td>

            </tr>
        </ng-template>
    </p-table>

    <button
        pButton
        label="Load"
        (click)="onClick()"
        style="
            position: absolute;
            bottom: 50px;
            right: 0
        ">
    </button>
</div>

app.component.ts

import { Component } from '@angular/core';

interface Item {
    id: Number,
    name: String,
    count: Number
}

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

export class AppComponent {

    isLoading: boolean = true;

    items: Item[] = []

    ngOnInit() {

        this.isLoading = true;

        setTimeout(() => {
            this.items = [
                {
                    id: 1,
                    name: "Pen",
                    count: 9
                },
                {
                    id: 2,
                    name: "Rubber Bands",
                    count: 14
                },
                {
                    id: 3,
                    name: "Carrybag",
                    count: 1
                },
                {
                    id: 4,
                    name: "Spoon",
                    count: 1
                },
                {
                    id: 5,
                    name: "Perfume",
                    count: 2
                },
                {
                    id: 6,
                    name: "Pencil",
                    count: 11
                },
                {
                    id: 7,
                    name: "NoteBook",
                    count: 3
                },
                {
                    id: 8,
                    name: "Facewash",
                    count: 1
                },
            ];

            // Set isLoading to false after 1 seconds
            this.isLoading = false;
        }, 1000);

    }

    //
    onClick() {
        this.items = [];
        this.ngOnInit();
    }

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';

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

export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/table