-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Mat Paginator is not working properly along when used conditional rendering (*ngIf) on the outer div. #10205
Comments
I have the solution. But I don't know whether this is the correct way or a workaround. Please feel free to close this issue, if this is how it is designed This is also applicable to MatSort. Remove the following piece of code from
Add the following piece of code
|
Unfortunately this is an Angular-thing where ViewChild doesn't catch elements with *ngIf in ngAfterViewInit. Your workaround looks feasible to me |
I have the same issue but I'm trying to load the data from api. |
@rain01: Here is the sample for that
This will still work if you remove the following
|
Hi when we put the condition still this is not working. <mat-paginator *ngIf="allItems ?.length > 0" #paginator [pageSize]="50" [pageSizeOptions]="[1,2,4,20, 40,100,150,200]"> |
the amount found items gets displayed correctly but pagination is still not working correctly :( how do i add another paginator and sort to your example @Abhijith-Nagaraja ? I have two tables in one component and cant get both paginators and sortings to work |
notice the |
Yes the *ngIf breaks the Material Paginator, however, instead of using *ngIf, you could use the [hidden] attribute like this: <div [hidden]="isLoading">
<mat-table [dataSource]="dataSource">
...
</mat-table>
</div> I have tested it on Angular 5 and it does work |
Same here the *ngIF break the paginator. I guess this is a bug. |
As suggested by @lpalbou *ngIf breaks mat-paginator and mat-sort.
You can take the code for CSS transitions from animista.com |
Thanks @Abhijith-Nagaraja your solution worked for me. |
Please document the issue and solution on https://material.angular.io/components/paginator/api |
hide its div to avoid undefined this.paginator as per angular/components#10205 (comment)
If multiple pagination are used in same page then we should use @ViewChildren Example: table1: table2: |
|
- @ViewChild(MatPaginator) paginator: MatPaginator;
-
- ngOnInit() {
- this.dataSource.paginator = this.paginator;
- }
+ @ViewChild(MatPaginator) set matPaginator(paginator: MatPaginator) {
+ this.dataSource.paginator = paginator;
+ } |
I had also faced same issue with Paginator and sorting with *ngIf . [hidden] attribute solved my issue too. Thank you so much @lpalbou !! :) |
I tried applying the [hidden] attribute to a mat-card element wrapped around the mat-table, but that did not work; however, wrapping the card in a div and adding the [hidden] attribute to that did work. |
A quick and easy way to fix the issue, idk why this answer is not among the most upvoted. |
Hi guys, I just got mine working by making this: and then after I get the data from subscribe or promise: |
I just wanted to make the paginator optional in my Table component, so I went for the SET solution.
Seems to me the issue happens when Angular initialises the datasource before the template has been rendered. So when the Mat-pagination is missing, it doesn't seem to initialise the datasource properly. The |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Bug, feature request, or proposal:
Bug
What is the expected behavior?
When conditional rendering is done using *ngIf on table on outer
<div>
, Mat-Paginator should paginate properlyWhat is the current behavior?
If table is inside a conditional *ngIf and is hidden to start with, then after the condition is satisfied and view is initialized, data is not paginated. And the paginator is displayed as below
![screen shot 2018-02-28 at 7 43 58 pm](https://user-images.githubusercontent.com/3592887/36826045-c0d4edde-1cbf-11e8-8818-111487adcf8f.png)
What are the steps to reproduce?
With conditional rendering where we can see the problem clearly
https://stackblitz.com/edit/angular-material2-issue-s1hkz9?file=app/app.component.html
Without conditional rendering, it works properly
https://stackblitz.com/edit/angular-material2-issue-3xb5aa?file=app/app.component.html
What is the use-case or motivation for changing an existing behavior?
We need to display a table with pagination only if certain condition is met
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Is there anything else we should know?
NA
The text was updated successfully, but these errors were encountered: