Mat-Table

[HUGOALMEIDARAMOS]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I have an initial component that is rendered and that has a button to open a modal, and as a parameter inside the data I pass a string, inside this modal, I have a method that is called at initialization, this method goes to the api and brings the data and fills my variable which is an observable and so I pass it to the child component which is the table, as below: <child-app *ngIf="listing$ | async as list" [ListReceived]="list">

My interface follows as below

export interface ILista{ lista: [ { valor1: string; valor2: number; valor3: string; valor4: number; valor5: number; valor6: string; } ]; pageNumber: number; pageSize: number; totalPage: number; totalElemento: number; }

And to insert the data in the datasource, I use the following form:

@Input() abc: : ILista[ ] = [ ]

metodo(){ this.datasource = new MatTableDataSource(this.abc['lista']; setTimeOut( ( ) => { this.paginator.pageIndex = 0, this.paginator.length = this.abc['totalElemento'] }); }

all paginator, table settings are done, I just didn't put them here. When the api returns no data , the return is as follows ;

{ lista: [ ]; pageNumber: number; pageSize: number; totalPage: number; totalElemento: number; }

Reproduction

StackBlitz link: Steps to reproduce:

Expected Behavior

Expected behavior is that if the return is an empty list, the table should render correctly just like the paginator and display the message inside that it has no data, and when there is data, show the records in the table

Actual Behavior

What happens is that the correct behavior only happens when the list [ ] , comes with data , if it comes empty , the screen breaks, the table does not show a message, the paginator does not appear correctly and in the console it shows several messages saying that the value is undefined. Remembering that this behavior only occurs when I put the angular material table inside a modal.

Environment

• Angular:
• CDK/Material:
• Browser(s): chrome, internet explore
• Operating System (e.g. Windows, macOS, Ubuntu):
• material angular
• Mat-table

[amysorto]

Thanks for the issue! Can you add your code into Stackblitz? It allows us to help debug your issue: Components StackBlitz starter.

[HUGOALMEIDARAMOS]

I can't put it now, because it's on the company's computer, which is blocked for data transmission both via the web and usb. That's why I didn't put it. The issue is that if I put a table of angular material inside a normal component, everything works, even if the api returns an empty object, the datasource handles it correctly. Now if the table is placed inside a dialog component of the angular material, if the api returns empty, it breaks the entire layout of the screen and in the console it keeps saying that the value is undefined, but when I analyze it, I believe that it is not receiving the value that I put in paginator.pageIndex = 0 and paginator.length = 0, so the angular material paginator knows that the total element is zero and the page is also zero.