Angular: How will i link the pageSize of Mat-paginator to render that amount of items?

Issue

I have a mat-accordion with multiple mat-expansion-panel. I want to apply pagination for the accordion. Below is my code:

HTML

<mat-accordion displayMode="flat" multi class="mat-table">
  <section class="mat-elevation-z2 mat-header-row">
    <span class="mat-header-cell">User Id</span>
    <span class="mat-header-cell">Name</span>
    <span class="mat-header-cell">Exam Name</span>
    <span class="mat-header-cell">Exam Category</span>
  </section>
  <mat-expansion-panel *ngFor="let result of results">
    <mat-expansion-panel-header class="mat-row">
      <span class="mat-cell">{{ result.user.id }}</span>
      <span class="mat-cell">
        {{ result.user.firstName[0].toUpperCase() + result.user.firstName.substr(1).toLowerCase() }}
        {{ result.user.middleName!=='' ? ' ' + result.user.middleName[0].toUpperCase() + result.user.middleName.substr(1).toLowerCase() + ' ' : '' }}
        {{ ' ' + result.user.lastName[0].toUpperCase() + result.user.lastName.substr(1).toLowerCase()}}
      </span>
      <span class="mat-cell">{{ result.exam.examName }}</span>
      <span class="mat-cell">{{ result.exam.examCategory.examCategoryName }}</span>
    </mat-expansion-panel-header>
    <div class="row">
      <div class="col">
        <h3>Personal Details:</h3> <br>
        Email: {{ result.user.emailId }} <br>
        Phone: {{ result.user.mobileNumber }} <br>
        Gender: {{ result.user.gender }} <br>
        Age: {{ result.user.age }} <br>
        City: {{ result.user.city }} <br>
        State: {{ result.user.state }} <br>
        Country: {{ result.user.country }}
      </div>
      <div class="col">
        <h3>Education Details:</h3> <br>
        College: {{ result.user.college }} <br>
        Degree: {{ result.user.degree }} <br>
        Graduation Year: {{ result.user.graduationYear }} <br>
        Graduation Percentage: {{ result.user.graduationPercentage }} <br>
        Skills: {{ result.user.skills }}
      </div>
      <div class="col" *ngFor="let resultDetail of result.resultDetailSet;">
        <h3>
          {{ resultDetail.examDetail.questionCategory.questionCategoryName }} -
          Marks: {{ resultDetail.examDetail.section.marksPerQuestion }}
        </h3> <br>
        Number of Questions: {{ resultDetail.examDetail.numberOfQuestions }} <br>
        Marks Obtained: {{ resultDetail.obtainedMarks }}/{{ resultDetail.totalMarks }} <br>
      </div>
    </div>
  </mat-expansion-panel>
</mat-accordion>
<mat-paginator #paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event" showFirstLastButtons></mat-paginator>

results = [];
length: number;
pageSize = 5;
pageSizeOptions: number[] = [1, 2, 5, 10];
pageEvent: PageEvent;

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

setPageSizeOptions(setPageSizeOptionsInput: string) {
  if (setPageSizeOptionsInput) {
    this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
  }
}

ngOnInit() {
  this.adminService.getCandidateResult().subscribe(response => {
    this.results = response.resultList;
    this.length = this.results.length;
    this.isLoading = false;
  });
}

This is my code till now as per the documentation of Paginator in Angular Material.
The paginator view is changing perfectly if I give choice but how will I link the accordion with it and change the view according to pageSize input or forward/backwar?

Please suggest me an answer to this.

Solution

As I mentioned in the comment it is better you control pagination in the server side, but here we consider you load all data in the ngOnInit.

HTML:

result -> selectedResult
for uppercase first character use titlecase in pipe
add getData to the pageEvent in mat-paginator

<mat-accordion displayMode="flat" multi class="mat-table">
  <section class="mat-elevation-z2 mat-header-row">
    <span class="mat-header-cell">User Id</span>
    <span class="mat-header-cell">Name</span>
    <span class="mat-header-cell">Exam Name</span>
    <span class="mat-header-cell">Exam Category</span>
  </section>
  <mat-expansion-panel *ngFor="let result of selectedResult">
    <mat-expansion-panel-header class="mat-row">
      <span class="mat-cell">{{ result.user.id }}</span>
      <pre>
      </pre>
      <span class="mat-cell">
        {{ result.user.firstName | titlecase }} 
        {{ result.user.middleName | titlecase }} 
        {{ result.user.lastName | titlecase }} 
      </span>
      <span class="mat-cell">{{ result.exam.examName }} </span>
      <span class="mat-cell">{{ result.exam.examCategory.examCategoryName }} </span>
    </mat-expansion-panel-header>
    <div class="row">
      <div class="col">
        <h3>Personal Details:</h3> <br>
        Email: {{ result.user.emailId }} <br>
        Phone: {{ result.user.mobileNumber }} <br>
        Gender: {{ result.user.gender }} <br>
        Age: {{ result.user.age }} <br>
        City: {{ result.user.city }} <br>
        State: {{ result.user.state }} <br>
        Country: {{ result.user.country }}
      </div>
      <div class="col">
        <h3>Education Details:</h3> <br>
        College: {{ result.user.college }} <br>
        Degree: {{ result.user.degree }} <br>
        Graduation Year: {{ result.user.graduationYear }} <br>
        Graduation Percentage: {{ result.user.graduationPercentage }} <br>
        Skills: {{ result.user.skills }}
      </div>
      <div class="col" *ngFor="let resultDetail of result.resultDetailSet;">
        <h3>
          {{ resultDetail.examDetail.questionCategory.questionCategoryName }} -
          Marks: {{ resultDetail.examDetail.section.marksPerQuestion }}
        </h3> <br>
        Number of Questions: {{ resultDetail.examDetail.numberOfQuestions }} <br>
        Marks Obtained: {{ resultDetail.obtainedMarks }}/{{ resultDetail.totalMarks }} <br>
      </div>
    </div>
  </mat-expansion-panel>
</mat-accordion>
<mat-paginator #paginator [length]="length" [pageSize]="pageSize"
  [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = getData($event)" showFirstLastButtons></mat-paginator>

TS:

results = [];
selectedResult = [];
length: number;
pageSize = 5;
pageSizeOptions: number[] = [1, 2, 5, 10];
pageEvent: PageEvent;

// @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

setPageSizeOptions(setPageSizeOptionsInput: string) {
  if (setPageSizeOptionsInput) {
    this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
  }
}

getData( event?: PageEvent) {
  this.selectedResult = this.results.slice(event.pageIndex * event.pageSize, event.pageIndex * event.pageSize + event.pageSize);
  return event;
}


ngOnInit() {
  this.adminService.getCandidateResult().subscribe(response => {
    this.results = response.resultList;
    this.selectedResult = this.results.slice(0, this.pageSize);
    this.length = this.results.length;
    this.isLoading = false;
  });
}

here is online example https://stackblitz.com/edit/angular-ivy-wcwufj

Answered By – Diako Amir

Answer Checked By – Pedro (AngularFixing Volunteer)

Issue

Solution

Leave a Reply Cancel reply