We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Pager component is not working as per our requirement.

I am trying to display the items based on the page change events.
Please see below stackblitz address.

In app.component.html i have mentioned [pageSizes]="true" but drop down is not displaying

Current Behaviour.
1. able to display the pager component on top and it is changing the number of pages by changing the [pageSize]= "5" value.

Expected Behaviour.
1. I want to display the drop down but not with <ejs-dropdownlist> instead i want to display using [pageSizes]="true".
2. It should  display the number of items(in <div> tag) per page as per the drop down value changing dynamically.
Example: If number of items is 50 and [pageSizse] is 10 then it should display the 5 pages in the pager component and per page it should display the 10 items. 
Instead of 10 items per page,  i would like to change the items per page using dropdown so the correponding pages should change in the pager component.

1 Reply

MS Madhu Sudhanan P Syncfusion Team March 8, 2019 05:56 AM UTC

Hi Santhosh, 

Thanks for contacting Syncfusion support. 

To show page size dropdown, we need to inject the PagerDropDown module as below in the app.component.ts file. Also we need to handle the dropDownChanged event to refresh the view based on the page size. 

<ejs-pager #pager [totalRecordsCount]="students.length"  
[currentPage]="currentPage" [pageSize]= "pageSize"  
[pageSizes]="true" (dropDownChanged)="changed($event)" (click)="click($event)"> 

import { PagerComponent, Pager, PagerDropDown } from '@syncfusion/ej2-angular-grids'; 

export class AppComponent implements OnInit { 
  @ViewChild("pager") pager: PagerComponent; 
  pageSize: Object = 5; 
  currentPage: any = 1; 
  students: Object[] = 
  ngOnInit() { 
    this.studentView = this.students.slice(0, this.pageSize); 
  changed(e) { 
    this.pageSize = e.pageSize; 
    let start = (this.currentPage - 1) * e.pageSize; 
    this.studentView = this.students.slice(start, start + e.pageSize); 
    click(args) { 
    if (args.currentPage) { 
      let start = (args.currentPage - 1) * this.pageSize; 
      this.studentView = this.students.slice(start, start + this.pageSize); 

Madhu Sudhanan P 

Live Chat Icon For mobile
Up arrow icon