bug(table): Table not correctly working as an Angular Element

[jimkeecn]

Reproduction

I have create a github repo for this performance issue from angular material, here is the link https://github.com/jimkeecn/buildxactDemo

the problem in the repo is. I have created an angular element with a mat-table. after building the angular element and used in other project. The pagination of the mat-table is not working at the very start until i have trigger some detect change, however the pagination has slow reaction after click and weird styling and flicking of texts.

Steps to reproduce:

download the repo.

• open the index.html in folder /I am outside of the project/
• you will see the performance of the angular material input and table.
• the component is actually in library project folder /search-page
• angular element is in external project folder /app-component

Expected Behavior

I was expecting the mat-table pagination is working, and pagination button is clickable.

Actual Behavior

• Mat-Table
• pagination forward and backward button is not clickable
• pagination dropdown is not clickable

Environment

• Angular: ~9.0.3
• Angular/elements: ^9.0.4
• CDK/Material: ^9.1.0
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[jimkeecn]

@Splaktar

[Splaktar]

Related to https://github.com/angular/components/issues/18805.