ExpressionChangedAfterItHasBeenCheckedError Expression has changed after it was checked Previous value undefined

Question

I know there are a lot of same questions already posted in stack-overflow and tried different solutions to avoid the run-time error but None of them are working for me     Component and Html Code  export class TestComponent implements OnInit  AfterContentChecked        Input   DataContext  any       Input   Position  any      sampleViewModel  ISampleViewModel     DataContext    null  Position  null        constructor private validationService  IValidationService  private modalService  NgbModal  private cdRef  ChangeDetectorRef               ngOnInit                ngAfterContentChecked                  debugger              this sampleViewModel DataContext   this DataContext              this sampleViewModel Position   this Position            lt div class  container-fluid sample-wrapper text-center   ngClass   sampleViewModel DataContext  Style  CustomCssClass    samplewidget-   sampleViewModel Position  Columns    x    sampleViewModel Position  Rows  gt         some other html here  lt  div gt    Please Note   This Component is loaded dynamically using DynamicComponentLoader  After My trouble shooting I have identified couple of issues  First of all this child component is loaded dynamically by using DynamicComponentResolver and passing the input values like below   ngAfterViewInit         this renderWidgetInsideWidgetContainer             renderWidgetInsideWidgetContainer         let component   this storeFactory getWidgetComponent this dataSource ComponentName       let componentFactory   this  componentFactoryResolver resolveComponentFactory component       let viewContainerRef   this widgetHost viewContainerRef      viewContainerRef clear        let componentRef   viewContainerRef createComponent componentFactory       debugger        lt IDataBind gt componentRef instance  WidgetDataContext   this dataSource DataContext        lt IDataBind gt componentRef instance  WidgetPosition   this dataSource Position         Even If I changed my child component html like below I am getting this same error Just add a angular ngclass attribute   lt div class  container-fluid ds-iconwidget-wrapper text-center   ngClass   Sample  gt    lt  div gt    My databinding and everything are working fine Do I need to do anything on parent component  I already tried all the lifecyle events in child component

User · Accepted Answer

The ngAfterContentChecked lifecycle hook is triggered when bindings updates for the child components directives have been already been finished  But you re updating the property that is used as a binding input for the ngClass directive  That is the problem  When Angular runs validation stage it detects that there s a pending update to the properties and throws the error   To understand the error better  read these two articles    Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error Everything you need to know about change detection in Angular   Think about why you need to change the property in the ngAfterViewInit lifecycle hook  Any other lifecycle that is triggered before ngAfterViewInit Checked will work  for example ngOnInit or ngDoCheck or ngAfterContentChecked    So to fix it move renderWidgetInsideWidgetContainer to the ngOnInit   lifecycle hook

User · Answer

NgIf can create problem here   so either use display none css or easier way is to Use  hidden    condition

User · Answer

Two Solutions    Make Sure if you have some binding variables then move that code to settimeout       0   Move your related code to ngAfterViewInit method

User · Answer

setTimeout      gt       your code here    0     I wrapped my code in setTimeout and it worked

User · Answer

Try this  to call your code in ngOnInit   someMethod      emitted method call from output          Your code     ngOnInit      someMethod       call here your error will be gone

User · Answer

If you are using  lt ng-content gt  with  ngIf you are bound to fall into this loop   Only way out I found was to change  ngIf to display none functionality

User · Answer

I had the same issue trying to do something the same as you and I fixed it with something similar to Richie Fredicson s answer   When you run createComponent   it is created with undefined input variables  Then after that when you assign data to those input variables it changes things and causes that error in your child template  in my case it was because I was using the input in an ngIf  which changed once I assigned the input data    The only way I could find to avoid it in this specific case is to force change detection after you assign the data  however I didn t do it in ngAfterContentChecked     Your example code is a bit hard to follow but if my solution works for you it would be something like this  in the parent component    export class ParentComponent implements AfterViewInit        I m assuming you have a WidgetDirective     ViewChild WidgetDirective  widgetHost  WidgetDirective     constructor      private componentFactoryResolver  ComponentFactoryResolver      private changeDetector  ChangeDetectorRef           ngAfterViewInit         renderWidgetInsideWidgetContainer           renderWidgetInsideWidgetContainer         let component   this storeFactory getWidgetComponent this dataSource ComponentName       let componentFactory   this componentFactoryResolver resolveComponentFactory component       let viewContainerRef   this widgetHost viewContainerRef      viewContainerRef clear        let componentRef   viewContainerRef createComponent componentFactory       debugger         This  lt IDataBind gt  type you are using here needs to be changed to be the component        type you used for the call to resolveComponentFactory   above  if it isn t already          It tells it that this component instance if of that type and then it knows        that WidgetDataContext and WidgetPosition are  Inputs for it        lt IDataBind gt componentRef instance  WidgetDataContext   this dataSource DataContext        lt IDataBind gt componentRef instance  WidgetPosition   this dataSource Position      this changeDetector detectChanges            Mine is almost the same as that except I m using  ViewChildren instead of  ViewChild as I have multiple host elements

User · Answer

ngAfterViewInit        setTimeout      gt         this renderWidgetInsideWidgetContainer          0          That is a good solution to resolve this problem

User · Answer

I was having trouble with    ERROR  ExpressionChangedAfterItHasBeenCheckedError  Expression has changed after it was checked  Previous value for  mat-checkbox-checked    true   Current value   false    The Problem here is that the updated value is not detected until the next change Detection Cycle runs  The easiest solution is to add a Change Detection Strategy  Add these lines to your code  import   ChangeDetectionStrategy   from  quot  angular core quot       import   Component     changeDetection  ChangeDetectionStrategy OnPush    selector   quot abc quot     templateUrl   quot   abc html quot     styleUrls    quot   abc css quot

User · Answer

you have to tell angular that you updated the content after ngAfterContentChecked  you can import ChangeDetectorRef from  angular core and call detectChanges  import  ChangeDetectorRef   from   angular core    constructor  private cdref  ChangeDetectorRef        ngAfterContentChecked      this sampleViewModel DataContext   this DataContext  this sampleViewModel Position   this Position  this cdref detectChanges

[angular] ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'

Examples related to angular

Examples related to runtime-error