dynamic-table | Dynamic HTML grid with jQuery/AngularJS frontend | Grid library

As mentioned below by Aaron, the "Other Option" approach works without issues and feels a lot cleaner. I'll leave the updates and everything in case anyone in the future has a similar problem and the workarounds provide useful somehow.

I'm having a weird problem trying to render dynamic components inside an Angular material table with pagination and sort.

Here is a Stackblitz with the reproduced issue. From what I've researched, it seems to be some sort of change detection issue, although I could be wrong on that since I have no idea why it's happening. If anyone has any ideas on how to fix this issue, or if I'm doing something blatantly wrong, feedback and help would be highly appreciated.

I'm using @ViewChildren and ComponentFactoryResolver inside a material design table to render components dynamically with a few pages of data. Everything looks fine, however when using matSort to sort the data, some of the rows that have dynamic components show the wrong data values, while the rest of the row (non-dynamic) has the correct ones. See screenshots below:

Before sorting:

After sorting:

console log of component instances (note the correct status field is passed, yet the wrong one is rendered).

Data and rendered components are shown accurately when I sort. Should match the dataSource.data field.

Visit the Stackblitz and run the application. Click the sort header for "Order Status". Notice how the first entry in the table says "Delivered" while the actual dataSource has it as "Cancelled. Also not that the rest of the row is accurate - just the dynamically rendered component is incorrect.

• Tried setting the status with a get() and set() instead of an @Input() and register an ngOnChage, where I call a changeDetectorRef from the component itself, but the issue persisted.

• Tried changing the ChangeDetectionStrategy - neither one did anything.

• Tried the solutions in the below section as well

This seems to be the same issue, however it was never answered. I'm hoping providing a Stackblitz will be helpful in getting the same answer. It seems to be some sort of change detection issue according to the poster.

When loading same component with different data, old data still showing - Angular 5

Tried explicitly calling the detectChanges() and markForCheck() chanceDetectionRef methods for the componentRefs, the parent component, the actual component that gets dynamically created with no luck.

Angular dynamic component loader change detection issue

Change detection not working when creating a component via ComponentFactoryResolver

If you sort by Order Status and get the wrong value to be in the first row as before, and then paginate to the next page and back, component shows the correct value. I'm assuming the pagination forces some sort of change detection in the material table, or the templates, or something along those lines, but I have no idea why the sort wouldn't do that. The current work around I have going is to just paginate to the next page and back, however that is by no means an acceptable solution, and I'd really like to understand what I'm doing wrong here, or what a fix for this is.

As per Aaron's additional insight below, I've added an Updated Stackblitz with a far more simplified example. On a closer look through, pagination doesn't seem to play a factor into the weird behavior. I can reproduce the issue with just 2 table entries and a sort (all pagination code removed). I've changed up the data coming in to match across the rows so it's clearer which rows come from where.

Here's a combined screenshot of before and after sorting with 2, 3, and 4, records:

I'm currently trying to see if I can force the table to re-render (assuming it's possibly shifting things around), and eventually going to dig through the source code for the table.

One workaround I was able to figure out is to set my dataSource to an empty array after I've saved a copy of it with the splice() in the onSortChange() right before doing my filtering logic, then setting it back to the filtered array. I'm assuming that triggers some sort of update in the material datasource/table which forces a re-render or update. I'll keep trying to figure out if there's a better approach to this, since it seems weird to be doing that, and in my original application I have a filterPredicate which also causes the same issue when filtering/resetting the filter.

Aaaaaand finally after some more research on this, I've come to at least somewhat of a solution that makes sense. After what I said on Update #2, I found this post:

https://github.com/angular/components/issues/15972#issuecomment-490235603

which explains why the table wasn't getting the updated dataSource. In my case it was probably a lot harder to figure that out since I was doing a sort/filter, and didn't think it would be directly tied to that. I'll still explore a few more ideas in the next few days, but if neither work, I'll go ahead and mark this as solved after that.