typescript - Angular Material paginator nextPage is disabled

Question

I have total 7 records getting from graphql call. I am displaying 2 records on 0th page. Then on each page i should get 2 records. And paginator component should say 1-2 of7. But somehow it is saying 1-2 of 2 and next arrow is disabled. So I cant send request to backend to get next page's data. I am implementing server side pagination using mat-paginator. How to set total count correctly so that my next arrow will be enabled.

HTML

  <mat-paginator
    #paginator
    (page)="PageEvents($event)"
  ></mat-paginator>

history.component.ts

import { SnackbarService } from './../../../shared/snackbar/snackbar.service';
import { AccountService } from './../../../services/account.service';
import {
  Component,
  OnInit,
  SimpleChanges,
  ViewChild,
  OnChanges,
  AfterViewInit,
  Input
} from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import {
  OidcSecurityService,
  PublicConfiguration,
  OidcClientNotification,
} from 'angular-auth-oidc-client';
import { Observable } from 'rxjs';
import { HistoricalPaymentUsingGraphql } from '../../../Model/historical-payment-graphql.model';
import { HistoricalPayment } from '../../../Model/historical-payment.model';
import { ModelService } from '../../../services/model.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { merge } from 'rxjs';
import { startWith } from 'rxjs/operators';
import { switchMap } from 'rxjs/operators';
import { catchError } from 'rxjs/operators';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-history',
  templateUrl: './history.component.html',
  styleUrls: ['./history.component.css'],
})
export class HistoryComponent implements OnInit, OnChanges {
  @Input() loanNumber: string;
  data: string[];
  output: HistoricalPaymentUsingGraphql[];
  pageSize: number;
  totalNumberOfRecords: number;
  pageNumber: number;
  configuration: PublicConfiguration;
  userDataChanged$: Observable<OidcClientNotification<any>>;
  userData: any;
  isAuthenticated$: Observable<boolean>;
  payments: HistoricalPaymentUsingGraphql[];
  greenHilightIdentifiers: string[] = ['SR', 'SRA', 'AP', 'RP', 'PA', 'SWA'];
  numberofLoanFeeTransactions: number;
  numberofPaymentTransactions: number;
  numberofPaymentsUnapplied:number;
  displayedColumns: string[] = [
    'transactionDate',
    'identifier',
    'description',
    'effectiveDate',
    'paidToDate',
    'amountPosted',
    'principalAmount',
    'principalBalanceAfterTransaction',
    'interestAmount',
    'escrowAmount',
    'escrowBalanceAfterTransaction',
    'lateChargeAmount',
    'unappliedFundsAmount',
    'unappliedFundsBalanceAfterTransaction',
  ];
  errorMessage: string;
  dataSource: MatTableDataSource<HistoricalPaymentUsingGraphql>;
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;
  constructor(
    public oidcSecurityService: OidcSecurityService,
    private spinner: NgxSpinnerService,
    private accountService: AccountService,
    private modelService: ModelService,
    private snackbarService: SnackbarService
  ) {
    
    this.pageNumber = 0;
    this.totalNumberOfRecords = 7;
  }

  ngOnInit(): void {
    this.pageNumber = 0;
    this.payments = [];
    this.configuration = this.oidcSecurityService.configuration;
    this.isAuthenticated$ = this.oidcSecurityService.isAuthenticated$;
    this.data = new Array();
    this.output = new Array();
    if (this.loanNumber === undefined) {
      return;
    }

    // this.accountService.getPaymentHistory(this.loanNumber).subscribe(
    //   (data) => {
    //     this.assignPayments(data.historicalPayments);
    //   },
    //   (error) => {}
    // );
    this.getPaymentHistory(this.loanNumber, this.pageNumber);
   // this.dataSource.paginator = this.paginator;
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.pageNumber = 0;
    this.payments = [];
    this.data = new Array();
    this.output = new Array();
    if (this.loanNumber === undefined) {
      return;
    }
 
    this.getPaymentHistory(this.loanNumber, this.pageNumber);
      
    this.modelService.updateModel();
    //this.dataSource.paginator = this.paginator;
  }

  PageEvents(event: any){
    console.log("event", event);
    const pageSize = event.pageSize; 
    const currentPage = event.pageIndex + 1; 
    this.getPaymentHistory('21', event.pageIndex);
   // this.defaultPayload.pageSize = pageSize;
   // this.defaultPayload.currentPage = currentPage;
   // this.getDataService(this.defaultPayload)
}

  
  getBackColor(identifier: string) {
    const searchTerm = identifier.trim();
    if (this.greenHilightIdentifiers.some((e) => e === searchTerm)) {
      return { 'background-color': '#cbf8cb' };
    }
    return { 'background-color': 'White' };
  }

  getPaymentHistory(loanNumber: string, pageNumber: number) {
    debugger;

   
      this.showSpinner();
      this.accountService.getPaymentHistoryUsingGraphql('1987074',pageNumber, 2 ).subscribe(
        (data) => {
          debugger;
          this.totalNumberOfRecords = data.data.consolidatedPaymentTransactions.totalCount;
          this.paginator.length = this.totalNumberOfRecords;
          this.paginator.pageSize = 2;
          this.assignPayments(data.data.consolidatedPaymentTransactions.items);
       // this.numberofLoanFeeTransactions = data.data.loanFeeTransactions.items.length;
       // this.numberofPaymentTransactions = data.data.paymentTransactions.items.length;
        //this.numberofPaymentsUnapplied = data.data.paymentsUnapplied.items.length;
        console.log("Length - " + this.numberofPaymentTransactions);
       // this.assignPayments(data.data.loanFeeTransactions.items,
        //  data.data.paymentTransactions.items, data.data.paymentsUnapplied.items);
        this.hideSpinner();
        },
        (error) => {
          this.hideSpinner();
          this.showError('Failed to load Payment History');
        }
      );
      
  }

  private assignPayments(consolidatedPaymentTransactions: HistoricalPaymentUsingGraphql[]) {
    this.payments = consolidatedPaymentTransactions;
    this.updateDataSource(this.payments);
  }

  private updateDataSource(paymentList: HistoricalPaymentUsingGraphql[]) {
    this.dataSource = new MatTableDataSource(paymentList);
    this.dataSource.paginator = this.paginator;
    this.paginator.length = this.totalNumberOfRecords;
   // this.paginator.hasNextPage = true;
    this.dataSource.sort = this.sort;
    this.paginator.length = this.totalNumberOfRecords;
  }

  private getData(paymentList: HistoricalPaymentUsingGraphql[]) {
    debugger;
    for (let i = 0; i < paymentList.length; i++){
      var val = JSON.stringify(paymentList[i]);
      if(this.data.indexOf(val) < 0){
        this.data.push(val);
        this.output.push(paymentList[i]);
      }
  }
}
/** 
  onChangePage(event: PageEvent) {
    const pageSize = +event.pageSize; // get the pageSize
    const currentPage = +event.pageIndex + 1; // get the current page
   
    this.service.paginationData(pageSize, currentPage); // call the service
   }*/

  showSpinner() {
    this.spinner.show(undefined, {
      type: 'ball-spin-clockwise',
    });
  }

  hideSpinner() {
    this.spinner.hide();
  }

  private showError(error: string) {
    this.errorMessage = error;
    this.snackbarService.show(error, 'danger');
  }
}

question from:https://stackoverflow.com/questions/66060058/angular-material-paginator-nextpage-is-disabled

Answer 1

Waitting for answers