6

I'm looking for an event what is fired when the Angular Material table (mat-table) rendering is finished.

I think it's need to fire on data source is changed, or the user changed the displayed columns or paginate event happend (but it's the same the data source is changed), or any other event happend what is occours a rerendering event.

I tried the generic ngOnChanges but it's not fireing when user change the displayed columns.

Is there any similar event what I can listen?

netdjw
  • 5,419
  • 21
  • 88
  • 162
  • I don't think there is (https://material.angular.io/components/table/api). What's your use case? – David May 21 '20 at 10:54
  • @David I just added a custom solution to the tables what give option to the user to resize columns horizontally. I added divs to `th` & `td` tags to give a handle to the user to resize action. But if the user change the visible columns my divs are gone. If the use change datas in thable and the table height is changed, my divs need to be refreshed... – netdjw May 21 '20 at 11:13
  • 1
    Check if this answer helps you: https://stackoverflow.com/a/63493607/4233941 – Nicolae Daian Aug 19 '20 at 19:19
  • 1
    There is an old but still open github feature request: https://github.com/angular/components/issues/8068. Also you may have a time shift between component model change and completed DOM rendering. – GeofoxCoding Oct 30 '20 at 14:48

1 Answers1

4

As of August 2021, you can use the contentChanged output property:

<mat-table #matTable
           [dataSource]="tableDatasource"
           (contentChanged)="hideLoader()" <--
>
...

Here's the related, merged PR.

Joe - GMapsBook.com
  • 15,787
  • 4
  • 23
  • 68