[Table] md-data-table initially shows empty when bound to populated observable

[michael-lang]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

An md-data-table should always be updated with the bound observable data

What is the current behavior?

When an md-data-table is created with a datasource, but hidden by an ngIf at component init and later made visible by the ngIf expression, the md-data-table does not render the header or any rows. however, if you do anything that would cause a change detection cycle such as click a button, open a menu, or click in an input the data-table magically appears.

What are the steps to reproduce?

https://plnkr.co/edit/joKcnW733W23Ngxed4gQ?p=preview

I started with the basic table from the md-data-table documentation page. Then I wrapped it in an md-card with an *ngIf="loaded" and a component property of the same name initialized to false. Another md-card with a button has a click handler that sets loaded to true on every press.

Given how this component loads the data in the data-table on page init, the act of pressing the button should make that hidden table appear. It should not require another action to trigger change detection to make the table recognize the observable and render.

What is the use-case or motivation for changing an existing behavior?

Our search results page usually has 3 section in the search results area, which is likely typical of many applications that have search capabilities.

1. a spinner that appears if our ngrx store shows a search is in progress
2. a no results section that appears if our ngrx store shows a search is complete with no results.
3. a search results section that appears if our ngrx store shows search is completed with 1 or more results.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular material beta 8. same versions as the current angular material documentation.

Is there anything else we should know?

[willshowell]

You're in luck, this is fixed in master! #5775

duplicate plunker using master build

right now, you can workaround it with

setTimeout(() => this.cd.markForCheck())

https://plnkr.co/edit/McJl2exa18f76MBcF00V?p=preview

[texasaggie96]

@andrewseguin Any idea on when beta-9 will be released?

[iamwhitebox]

@andrewseguin none of these examples ever work.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}