I have been experiencing ExpressionChangedAfterItHasBeenCheckedErrors in my Angular App since I updated Angular to version 17. I tried to understand why this error appears and I found the reason. Now I don't know how I can fix it, because the component is dynamically loaded through a directive if the necessary data is available. I have a directive which adds different action components such as edit, delete and add to the mat-table's action column, depending on the input values. The ng-container with the directive is only displayed, if the necessary data is available. So after the template is rendered. @if (data) { <ng-container tableRowActions [editAction]="true" [popups]="popups" [actionInputData]="data" [row]="row" (actionEventFired)="executeTableRowAction($event)" > </ng-container> } I need this approach, because else it isn't possible to do that. I could trigger the change detection after the components are rendered, but I don't think that this is a good way to deal with this error. Does anyone have an idea how I can fix it? Continue reading...
