CODEWITHSUNDEEP
angularangular-material
Kod
Kod

Reputation: 309

mat-paginator not working well with [hidden]

Recently when I worked with "mat-table" , had to use "mat-paginator" and found out that the [hidden] attribute does not have any effect on it. Then i ended up using

<mat-paginator [ngStyle]="{display: nodes.length >0 ? 'block' : 'none'}" [pageSize]="50" [pageSizeOptions]="[5, 25, 50, 100]">

on the contrary *ngIf is working, But.. its giving me trouble with dynamic data and observable.

Any thoughts on how to do it right please??

Upvotes: 2

Views: 4316

Answers (4)

Carolina
Carolina

Reputation: 1

Like stated in the comments above, hidden won't work with mat-paginator, if you really need to use ngIf, the solution I found was to put a timeout in the paginator, like this:

ngOnChanges() {
this.dataSource.data = this.items;
setTimeout(() => this.dataSource.paginator = this.paginator);}

this will work, although I believe it's not the best approach.

Upvotes: 0

Petar Ivanov
Petar Ivanov

Reputation: 1

[hidden] property of Paginator didn't works for me. My solutions is:

In template:

 <mat-paginator
  [ngClass]="{ hiddenElement: (dataSource.counter | async) === 0 }"

Where counter is a BehaviorSubject with number of page elements. In styles I've added class:

.hiddenElement {
  display: none; 
}

Upvotes: 0

John Langford
John Langford

Reputation: 1445

The following worked for me just now:

  1. Add a new element (such as a div) as a parent of the mat-paginator
  2. Add the [hidden] attribute and condition to the parent div element

For example:

<div [hidden]="nodes.length <= 0">
  <mat-paginator [pageSize]="50" [pageSizeOptions]="[5, 25, 50, 100]"></mat-paginator>
</div>

This seems to work with dynamic data as well.

Upvotes: 6

Gaurav Upadhyay
Gaurav Upadhyay

Reputation: 444

[hidden] attribute makes the element's visibility none but the DOM element is added to HTML and somehow the property display: none is overridden by other parent CSS rules.

in the case of *ngIf, the element is not created in DOM. so other CSS rules do not apply.

*ngIf approach is perfect.

Upvotes: 0

Related Questions