Components: Message within table while data is loading

[dekhaus]

Hi All

I've got a working mat-table - where data is loaded from an API via HTTP. Works great.

The only issue I have is that the data appears empty while the data is loading.

My DataSource subclass (RequestDataSource) uses a HTTP based service and RequestDataSource has a public boolean variable ('loading') which I initialize to true and set to false when the Observable in the 'connect()' method is done loading data.

Updating the state of my 'loading' variable works ('Loading ...' appears on the page when the data is loading and disappears when its done).

I'd like to either completely hide the table while the data is loading or - better yet, have the table display a sensible message (within its borders) when the data is loading. Is that possible and if so - how ?

p.s. Directly 'hiding' the 'mat-table' element does not work

Thanks
Dave

[xipheCom]

what do you mean with hiding? *ngIf should work, if not do it within a wrapper. Do not forget to set changeDetection to "onPush" and pipe it with "async" if you handle with observable data (what a http request is). You should upload a plunker, so we can see your problem and play around with it.

I do not think it is an issue.

[dekhaus]

Hi

By 'hiding' I meant adding a 'loading' attribute to 'mat-table' ..

this does not work becuase the table is always visible. Initially its visible and empty and then once the data is downloaded - its populated with data.

Not sure what you mean by 'changeDetection'. Is there documentation for this as well as the 'async' pipe you mention ?

Thanks
Dave

[andrewseguin]

Please refer all troubleshooting questions to our community at StackOverflow, Angular Material mailing lists, Gitter, etc. We try to keep our issues here only open for bugs and feature requests.

If you end up running into a bug trying to implement this, feel free to open an issue.

[ewaschenko]

@dekhaus Did you find a way to display a message within the table? I tried @andrewseguin
HTTP loading spinner but it doesn't work quite right in the table runs off the page

[angular-automatic-lock-bot[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._}