Integrate pager component with ListView in Angular ListView component

12 Sep 20256 minutes to read

To enable paging functionality in the Syncfusion Angular ListView component, integrate the Pager component from the Syncfusion Grid package. This allows users to navigate through large sets of list items efficiently.

Begin by installing the ej2-angular-grids package, which provides the Pager component:

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

Next, import the Pager into your ListView sample:

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.

To display the correct set of records for the current page, use the query property of the ListView. This property enables you to fetch and display only the records relevant to the selected page.

When the Pager’s page is changed, update the ListView’s query property to fetch the appropriate data slice. The following code demonstrates how to handle the Pager’s click event and update the ListView accordingly:

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

In this code, the currentPage value from the Pager event is used to calculate the range of records to display in the ListView for the selected page.

Note: If the pageSize property is not specified, the Pager defaults to displaying 12 records per page.

The headerTemplate and template properties of the ListView can be defined using Angular’s ng-template to customize the appearance of list items and headers. Adjust the styles as needed to match your application’s requirements.

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));