4
  @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
     }
}
baiju thomas
  • 146
  • 1
  • 2
  • 12

1 Answers1

4

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

Jasdeep Singh
  • 7,901
  • 1
  • 11
  • 28
  • 1
    This is not what I was looking for.. setTimeout(() => { this.paginator.length = 120;}); works ...but if I use this.paginator.length = 120 it doesn't but I don't want to use settimeout is there any alternative solution.thanks – baiju thomas Apr 06 '20 at 13:36
  • Why are setting it in component class? As shown in stackblitz it is working perfectly. Not sure why it is happening in your case, if you do not want to use setTimeout then you can use ChangeDetector detectChanges https://angular.io/api/core/ChangeDetectorRef – Jasdeep Singh Apr 06 '20 at 14:02
  • can I use something like these this.paginator.length = 120; this.ref.detectChanges(); but this did not work – baiju thomas Apr 06 '20 at 15:29
  • can you please update your stackblitz, where you need it and how are you using it? – Jasdeep Singh Apr 06 '20 at 15:31
  • please find the stackblitz link...https://stackblitz.com/edit/angular-xkzpxe – baiju thomas Apr 06 '20 at 16:15
  • please check this- https://stackoverflow.com/questions/48062354/why-calling-detectchanges-inside-component-doesnt-update-values-but-wrapping – Jasdeep Singh Apr 06 '20 at 17:36
  • So setTimeOut is the only option for this? I tried with zone, markForCheck () not seems to be working..please suggest thanks – baiju thomas Apr 07 '20 at 18:44
  • I think so buddy, i have also checked and did not found any other solution. – Jasdeep Singh Apr 07 '20 at 18:46