CODEWITHSUNDEEP
angularmat-pagination
k.vincent
k.vincent

Reputation: 4143

How to keep customized length for matpaginator?

I am using a MatPaginator with a customized length. The issue is that the customized length works just after initial loading. But after that, when I execute other API request using a search input field, and get a new result, the paginator shows the default length of the dataSource again. How can I keep the my defined customized length over the whole process?

The value if the customized length should be used just if it's not 0, otherwise the default dataSource length should be passed/used

TS:

@ViewChild('usersPaginator')
public set usersPaginator(mp: MatPaginator) {
    if (this.dataSourceUsers) {
        this.dataSourceUsers.paginator = mp;
    }
}

HTML:

<mat-paginator #usersPaginator [length]="usersService.customizedLength()" [pageSizeOptions]="[5,10,15]" [showFirstLastButtons]="true" />

P.S. customizedLength() is a signal holding a result of calculation which I run in the service after getting the API response.

Upvotes: 0

Views: 79

Answers (1)

Mathieu Marthy
Mathieu Marthy

Reputation: 1

I resolved this problem by removing:

ngAfterViewInit() {
  this.dataSource.paginator = this.paginator
}

My mat-paginator looks like this:

<mat-paginator
    [pageSize]="pageSize"
    [pageSizeOptions]="[5, 10, 25, 100]"
    [length]="totalElements"
    (page)="onPageChanges($event)">
</mat-paginator>

The mat-paginator isn't linked to the MatTableDataSource. It is javascript that directly modifies the MatTableDataSource data.

When the page or the page size changes, the function onPageChange is called.

onPageChanges(pageEvent: PageEvent) {
  this.pageSize = pageEvent.pageSize;
  this.pageIndex = pageEvent.pageIndex;

  this.loadData();
}

The function loadData make a resquest to the api to get data and total number of elements

this.myservice.getData(this.pageIndex, this.pageSize)
  .subscribe(res => {
    const data = res.result;

    this.dataSource.data = data["items"];
    this.totalElements = data["totalElements"];
  })

Hope this helps ! 😊

Upvotes: 0

Related Questions