mat-paginator length is not working.Not able to set it

[Shashwat]

I am trying to call API on the click of pagination. Initially, I had set the length statically and it was working fine. I was able to do a pagination API call.And then I had tried to set the length dynamically as well and it worked too, but later on, it stopped working. Please help me to point out my mistake. I am setting the length of content in this.totalEmp and able to print it on html side as well but when I am trying to set in mat-paginator for [length]. It is not working for me.I tried to set #paginator in mat-paginator as well but no change was seen  

Below is my implementation

 **HTML:**

<mat-paginator 

    [length]="totalEmp"

    [hidden]="normalPagination"

    [pageSize]="2" 

    [pageSizeOptions]="[2]"

    [pageIndex]="pageIndex"

    (page)="pageEvent = getDataByPagination($event)"></mat-paginator>

 

**.ts file Code** 

export class EmpComponent implements OnInit {

 

         dataSource: any;

         totalEmp: number=0;

         normalPagination: boolean;

        

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

         @ViewChild(MatSort, { static: true }) sort: MatSort;

        

        ngOnInit() {

            this.getTableContentCount();

          }

        

        

         getTableContentCount() {

            this.myService.CountService().subscribe(

              (response: any) => {

                if (response) {

           

                  this.totalEmp = response;

                  this.getServerData(0,this.totalEmp);

                }

              },

              (error: any) => { }

            );

          }

        

        public getDataByPagination(event?: PageEvent) {

    this.myService.getPaginationService(event).subscribe(

      response => {

        if (response) {

          this.showLoader=true;

          this.normalPagination=false;

          this.total = this.totalEmp;      

          this.allData=response;

          this.dataSource = new MatTableDataSource(this.allData);

          this.dataSource.paginator = this.paginator;

          this.dataSource.sort = this.sort;

          this.showLoader=false;

        }

      },

      error => {

        // handle error

      }

    );

    return event;

  }

[Arnaud Deman]

Hi,

You could display the value of totalEmp directly in your template to see if its value is correct. You could also add some debug in your component, especially in the error callbacks. And I think pageIndex is undefined, according to the code you posted.

Regards,
Arnaud.

[Shashwat]

Hi Arnaud,

Thanks for replying.

I am printing the value of totalEmp. It is showing up every time.Then I tried to put paginator part under ngAfterInit() and it worked fine.

Also can you suggest me what would be best practice to declare pagination so that it works perfectly fine under any circumstances.

Regards,

Shashwat Tyagi

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/3GWO2UYhl1U/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/a1fc2542-0df4-4072-87fd-b4433df1beaan%40googlegroups.com.

[Arnaud Deman]

Hello,
It's hard to answer because I don't know what was the cause of the problem.
Was there an error in the console?
May be  “expression has changed after it was checked" ?

Regards Arnaud.

[Gaurav Kumar]

Custom Pagination in Angular 14

https://www.youtube.com/watch?v=GXtqDKlT2js