@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:
1.
2.

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