Angular PrimeNG Paginator Component

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 component in Angular PrimeNG. We will also learn about the properties, events & styling along with their syntaxes that will be used in the code.

Paginator component: It is used to display content in paged format.

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 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 there is only one page. It is of boolean data type, 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 boolean data type, 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 boolean data type, the default value is true.

Events:

• onPageChange: It is a callback that is fired when the page changes in the element.

Styling:

• p-paginator: It is the Container element.
• p-paginator-first: It is the first-page element.
• p-paginator-prev: It is the previous page element.
• p-paginator-pages: It is the container of page links.
• p-paginator-page: It is the page link.
• p-paginator-next: It is the next page element.
• p-paginator-last: It is the last page element.
• p-paginator-rpp-options: It is the rows per page dropdown.
• p-paginator-page-options: It is the jump to per page dropdown.

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:

Example 1: This is the basic example that illustrates how to use the Paginator component. We have used row & totalRecord property that will give the information about data count to be rendered per page & a total number of records respectively. 

app.component.html

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Paginator Component</h5>
<p-paginator [rows]="1" [totalRecords]="15"></p-paginator>

app.component.ts

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {}

app.module.ts

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 { PaginatorModule } from "primeng/paginator";

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

Output:

Example 2: In this example, we will use the pageLinkSize property in the paginator Component with rowsPerPageOptions dropdown.

app.component.html

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Paginator Component</h5>
<p-paginator
  [pageLinkSize]="10"
  [rows]="1"
  [totalRecords]="25"
  [rowsPerPageOptions]="[10,20,30]">
</p-paginator>

app.component.ts

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {}

app.module.ts

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 { PaginatorModule } from "primeng/paginator";

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

Output:

Reference: https://primeng.org/paginator