Integrate pager component in Angular ListView component

22 Jan 20256 minutes to read

The first and foremost step is to obtain the Pager component from Grid. Install the ej2-angular-grids package using the following command.

npm install @syncfusion/ej2-angular-grids --save

Import the Pager to the ListView sample which has been created.

import { Pager } from "@syncfusion/ej2-angular-grids";

The totalRecordsCount property of the Pager must be specified whenever using this particular component. By using pageSize property, the number of list items to be displayed is made available. The pageCount property allows the user to specify the visibility of the page numbers accordingly. Since the paging sample in the upcoming code snippet uses these three properties, the explanation provided here are minimal and to the point. For further API concerns in Pager component, click here.

With the help of the query property of ListView, the user can specify the number of records to be displayed in the current page.

The query property helps in splitting the entire datasource based on the user’s convenience. In the sample provided below, when clicking the next button in pager, it fetches the datasource based on the page size and the current page of the Pager component.

The headerTemplate and the template property of ListView is defined within ng-template. The required styles can be changed here accordingly.

public clickevent(args) {
  this.query = new Query().range((args.currentPage - 1) * this.pagesize, (args.currentPage * this.pagesize));
}

In the above code snippet, the event stores the currentPage value, and the datasource which is to be displayed in the next page is obtained.

Note: When pageSize isn’t mentioned, it defaults to 12 records per page.

app.component.ts
styles.css
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { PagerModule } from '@syncfusion/ej2-angular-grids'
import { Component } from '@angular/core';
import { Browser } from '@syncfusion/ej2-base';
import { datasource } from './datasource';
import { DataManager, Query, JsonAdaptor } from '@syncfusion/ej2-data';
import { Pager } from "@syncfusion/ej2-angular-grids";

@Component({
  imports: [
    ListViewModule, PagerModule, ButtonModule
  ],
  standalone: true,
  selector: 'my-app',
  template: `<div class="control-section">
  <ejs-listview id='listview' [dataSource]='data' [query]='query' showHeader='true' >
    <ng-template #headerTemplate let-data="">
      <table class="w-100"> <tr><td class="w-25">Order ID</td><td class="w-45">Ship       Name</td><td class="w-25">Ship City</td></tr></table>
    </ng-template>
    <ng-template #template let-data="">
      <table class="w-100"> <tr><td class="w-25" title=""></td><td class="w-45" title=""></td><td class="w-25" title=""></td></tr></table>
    </ng-template>
  </ejs-listview>
  <ejs-pager [pageSize]= 'pagesize' [totalRecordsCount]='totalrec' [pageCount]='pageCount' (click)='clickevent($event)'>
  </ejs-pager>
</div>`
})

export class AppComponent {
  public totalrec: number = datasource.length;
  public pagesize: number = 10;
  public pageCount: number = 2;
  //Define an array of JSON data
  public data: Object = new DataManager({
    json: datasource,
    adaptor: new JsonAdaptor
  });
  public query = new Query().range(0, this.pagesize);
  templatecheck: boolean;
  public clickevent(args: any) {
    this.query = new Query().range((args.currentPage - 1) * this.pagesize, (args.currentPage * this.pagesize));
  }
  constructor() {
    this.templatecheck = Browser.isDevice;
  }
}
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';

#sample-list {
    margin: 40px auto;
    max-width: 500px;
}

#btn {
    margin: 40px auto;
    display: block;
}

/* csslint ignore:start */

@font-face {
    font-family: "e-page-icon";
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfIAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmXOniGAAAAcgAAAFAaGVhZBC1AhkAAADQAAAANmhoZWEIUQQDAAAArAAAACRobXR4CAAAAAAAAYAAAAAIbG9jYQCgAAAAAAHAAAAABm1heHABDgCYAAABCAAAACBuYW1lv4Bt4QAAAwgAAAIZcG9zdJx8QW4AAAUkAAAAOwABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAApWcDV18PPPUACwQAAAAAANbRXpQAAAAA1tFelAAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAACAIwAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAAQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAoAAAAAIAAAAAA/QD9AALAIsAAAEHFwcnByc3JzcXNwUfHz8fLx8PHgLuhIRrg4NrhIRrg4P9iQECAwQGBwcJCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkaGhkZGBkXFxcWFhUUFBMSEREPDw4NDAsLCQcHBgQDAgEBAgMEBgcHCQsLDA0ODw8RERITFBQVFhYXFxcZGBkZGhoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwICg4OGa4SEa4ODaoCE7hoZGRgZFxcXFhYVFBQTEhERDw8ODQwLCwkHBwYEAwIBAQIDBAYHBwkLCwwNDg8PERESExQUFRYWFxcXGRgZGRoaGRkYGRcXFxYWFRQUExIREQ8PDg0MCwsJBwcGBAMCAQECAwQGBwcJCwsMDQ4PDxEREhMUFBUWFhcXFxkYGRkAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAGAAEAAQAAAAAAAgAHAAcAAQAAAAAAAwAGAA4AAQAAAAAABAAGABQAAQAAAAAABQALABoAAQAAAAAABgAGACUAAQAAAAAACgAsACsAAQAAAAAACwASAFcAAwABBAkAAAACAGkAAwABBAkAAQAMAGsAAwABBAkAAgAOAHcAAwABBAkAAwAMAIUAAwABBAkABAAMAJEAAwABBAkABQAWAJ0AAwABBAkABgAMALMAAwABBAkACgBYAL8AAwABBAkACwAkARcgZGVsZXRlUmVndWxhcmRlbGV0ZWRlbGV0ZVZlcnNpb24gMS4wZGVsZXRlRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABkAGUAbABlAHQAZQBSAGUAZwB1AGwAYQByAGQAZQBsAGUAdABlAGQAZQBsAGUAdABlAFYAZQByAHMAaQBvAG4AIAAxAC4AMABkAGUAbABlAHQAZQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAQIBAwARY2lyY2xlLWNsb3NlLS0tMDIAAAA=) format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* csslint ignore:end */

#sample-list .delete-icon::after {
    font-family: "e-page-icon";
    content: "\e700";
    float: right;
    cursor: pointer;
}

.control-section {
    overflow: auto;
    padding-bottom: 10px;
}

#listview {
    width: 100%;
}

.e-headertemplate-text {
    width: 100%;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.52);
}

#listview table {
  width: 100%;
  table-layout: fixed;
}

#listview td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w-25 {
  width: 25% !important;
  max-width: 25%;
}

.w-45 {
  width: 45% !important;
  max-width: 45%;
}

.w-100 {
  width: 100% !important;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Integrate pager component with ListView in Angular ListView component