CODEWITHSUNDEEP
angularangular-material
Eranki
Eranki

Reputation: 807

How to have conditional statement for mat-paginator?

I'm trying mat-paginator and it is working. But, when I keep it in *ngIf it fails to work.

<mat-paginator  (page)="changePage($event)"
           [length]="100"
           [pageSize]="20">
</mat-paginator>

Above one Works.

<div *ngIf="!spinner">
    <mat-paginator  (page)="changePage($event)"
           [length]="100"
           [pageSize]="20">
    </mat-paginator>
</div>

When I use *ngIf the page doesn't move. The paginator appears. However, we can't move to next page having conditional statement. Why does this happen?

I want to have conditional statement for paginator and the paginator should be displayed. Is there any other way for using conditional statement for paginator?

Upvotes: 1

Views: 1589

Answers (2)

Jack
Jack

Reputation: 658

What worked for me was hiding the paginator conditionally with CSS. Set its display to none when you don't want it to show up. It's not ideal on a design level but it produces the right UI results. With tailwind, I did something like this:

    <mat-paginator 
      class="{{conditionIsTrue ? 'hidden' : 'block'}}" 
      ....other properties
    >
    </mat-paginator>

Upvotes: 0

CruelEngine
CruelEngine

Reputation: 2841

According to your requirement specified in the comment:

There is an option to set the page selected index explicitly in mat-paginator. It can be done using pageIndex input .

All you have to do is as soon as the page changes , save the page Index in a variable and pass the index as input to the mat-paginator .

In your html , make the following changes : 

<div *ngIf='!spinner'>
  <mat-paginator [length]="100" [pageSize]="10" (page)="changePage($event)" [pageIndex]='pageIndex'>
  </mat-paginator>
</div>

in your ts file : 

  changePage(event : PageEvent){
    console.log("i'm called");
    this.pageIndex = event.pageIndex;
  }

I have modified the example that i shared in the comment that uses the above logic here

Upvotes: 1

Related Questions