I have been experiencing the ExpressionChangedAfterItHasBeenCheckedError-Error in my Angular App since I updated the 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 the error.

Does anyone have an idea how I can fix this error?