Pager component is not working as per our requirement.

[Santhosh Kumar]

I am trying to display the items based on the page change events.

Please see below stackblitz address.

https://stackblitz.com/edit/angular-syncpager?file=src/app/app.component.html

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.

[Madhu Sudhanan P]

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

... 

</ejs-pager> 

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

Pager.Inject(PagerDropDown); 

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

    } 

  } 

} 

https://stackblitz.com/edit/angular-syncpager-hl4ddy?file=src%2Fapp%2Fapp.component.ts 

Regards, 

Madhu Sudhanan P