0

I'm currently working on an application, which displays a table using angular mat table. I want the content of each cells to be dynamically added. So in my html code I added an anchor element in the cell area. Generally, I have been following the descriptions in the docu (https://angular.io/guide/dynamic-component-loader). Only, because I have multiple templates I'm using ViewChildren not ViewChild. So I have to subscribe to the ViewChildren's query list to get notified once they have been added. Once the list is initialized I want to dynamically load the components I actually want to have there. As described in https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4 this leads to the ExpressionChangedAfterItHasBeenCheckedErrorerror, because I load components in an on change hook, in the subscribe call more explicitly. I can solve this using the workarounds described in the article, like calling detectChanges(), but this doesn't solve the issue of the general setup, which feels wrong to me. Is there an intended way to do handle this? I created this stackblitz with a simplified version of what I want to achieve https://stackblitz.com/edit/angular-gitter-mc3xdi . It is build to resembel the example for the docs https://stackblitz.com/angular/eaaeaqnnaqxg

Link1510
  • 101
  • 1
  • 8
  • Quick thoughts: You could put the entire loop in `loadComponent` into `requestAnimationFrame`, or try to debounce the changes earlier like so: `this.appEditDirective.changes.pipe(debounceTime(100))` – Xceno Aug 21 '18 at 12:26
  • @Xceno thx, I believe this would work, but I'm looking for a cleaner more angular like way of solving this. I still hope there is some integrated angular behavior I'm just not finding. – Link1510 Aug 21 '18 at 12:34
  • IMHO the most angular like, hassle-free, version would be the `debounceTime` pipe then. Simply give the framework some time to complete the previous cycle and then update your dynamic components. I do something very similar and it works fine and stable. The whole notion of dynamically rendering components in Angular is a huge pain in the butt. I doubt it get's any better than this. But if you ever find a better, cleaner solution, I'd love to know about it! – Xceno Aug 21 '18 at 12:55

0 Answers0