Angular PrimeNG Paginator Properties

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 know how to use the Paginator Properties in Angular PrimeNG.

The Paginator Component is used to display the content in paged format. The properties of the paginator are listed below.

Syntax:

<p-paginator></p-paginator>

Paginator Properties:

• totalRecords: It is the total number of total records pages to be shown. It is of number datatype, the default value is 0.
• rows: It is the data count to display per page. It is of number datatype, the default value is 0.
• first: It is the zero-relative number of the first row to be displayed. It is of number datatype, the default value is 0.
• pageLinkSize: It sets the number of page links to display. It is of number datatype, the default value is 5.
• rowsPerPageOptions: It is the array of integer/object values to display inside the rows per page dropdown. It is of array data type, the default value is null.
• style: It is an inline style of the component. It is of string data type, the default value is null.
• styleClass: It is the style class of the component. It is of string data type, the default value is null.
• alwaysShow: It specifies whether to show it even if there is only one page. It is of a boolean data type, and the default value is true.
• showFirstLastIcon: It shows that the icons are displayed on the paginator to go first and the last page. It is of a boolean data type, and the default value is true.
• templateLeft: It is the template instance to inject into the left side of the paginator. It is of TemplateRef data type, the default value is null.
• templateRight: It is the template instance to inject into the right side of the paginator. It is of TemplateRef data type, the default value is null.
• dropdownItemTemplate: It is the template instance to inject into the dropdown item inside the paginator. It is of TemplateRef data type, the default value is null.
• dropdownAppendTo: It is the target element to attach the dropdown overlay. It can accept any type of data & the default value is null.
• dropdownScrollHeight: It is the dropdown height of the viewport in pixels, a scrollbar is defined if the height of the list exceeds this value. It is of string data type, the default value is 200px.
• currentPageReportTemplate: It is the template of the current page report element. It is of string data type, the default value is ({currentPage} of {totalPages}).
• showCurrentPageReport: It specifies whether to display the current page report. It is of boolean data type, the default value is false.
• showJumpToPageDropdown: It specifies whether to display a dropdown to navigate to any page. It is of boolean data type, the default value is false.
• showPageLinks: It specifies whether to show page links. It is of a boolean data type, and the default value is true.
  Events:
• onPageChange: It is a callback that is fired when the page changes in the element.

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:

Project Structure

Example 1: In the below code, we will be using the above properties to demonstrate the use of the Paginator Properties.

• app.component.html:

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Paginator Properties</h4>
    <p-paginator [rows]="5" [totalRecords]="10"></p-paginator>
</div>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    constructor(private primengConfig: PrimeNGConfig) { }

    ngOnInit() {
        this.primengConfig.ripple = true;
    }
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { PaginatorModule } from 'primeng/paginator';

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

export class AppModule { }

Output:

Example2: In the below code, we will be using the above properties to demonstrate the use of the Paginator Properties.

• app.component.html:

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Paginator Properties</h4>
    <p-paginator [rows]="5" [totalRecords]="10"
        showCurrentPageReport="true"
        alwaysShow="true"
        showFirstLastIcon="true"
        showJumpToPageDropdown="true">
    </p-paginator>
</div>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    constructor(private primengConfig: PrimeNGConfig) { }

    ngOnInit() {
        this.primengConfig.ripple = true;
    }
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { PaginatorModule } from 'primeng/paginator';

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

export class AppModule { }

Output: