How to update the length in getRangeLabel mat paginator

Viewed 1057
  @Injectable()
  export class MyCustomPaginatorIntl extends MatPaginatorIntl {
     public getRangeLabel = (page: number, pageSize: number, length: number): string => {

                if (length === 0 || pageSize === 0) {
                    return `${this.noRecord}`;
                }
                length = Math.max(length, 0);
                const startIndex = ((page * pageSize) > length) ?
                    (Math.ceil(length / pageSize) - 1) * pageSize :
                    page * pageSize;

                const endIndex = Math.min(startIndex + pageSize, length);
                this.getAndInitTranslations(startIndex, endIndex, length);
                return `${this.totalRecord}`;

            }
    }

I am trying to update the length (total record) i.e length say 100, is it possible to pass length value to getRangeLabel from another ts file in same component after paginator is called dataSource.paginator = this.paginator;

export class NewComponent implements OnInit(){

    length = 120;
    public ngOnInit() {
          this.dataSource = new MatTableDataSource(this.data);
          this.dataSource.paginator = this.paginator

     //After this can i able to update the getRangeLabel with custom length 120
     }
}
1 Answers

I am assuming you just want to set the total length of mat-pagiator. You are looking for a way to bind it with a component property. You can simply do it by binding it with length input property of mat-paginator. Please find the code you need to implement it below:

Template changes required:

<mat-paginator [length]="length"
</mat-paginator>

Changes required in typescript, let say I have a property called length:

length:number = 120;

Please find the working code here: https://stackblitz.com/edit/angular-xofqpn

Related