ExpressionChangedAfterItHasBeenCheckedError : when Event emitted from Child Component

Question

Here is the stackblitz code, where I am emitting event from child component when the API call is made using the service.ts file.

My child.comp.ts

import { Component, Output,EventEmitter } from '@angular/core';
import {Service} from './service';

@Component({
  selector: 'child',
  template: `Child data: {{data}}`
})
export class ChildComponent  {
  @Output() change = new EventEmitter();
  data: string;
  constructor(private svc: Service){}

  ngOnInit(){
    this.change.emit(true);
    this.svc.getMsg()
      .subscribe( data =>{
        this.data = data;
        this.change.emit(false);
      })
  }


}

My app.comp.ts

import { Component ,ChangeDetectorRef} from '@angular/core';
import {Service} from './service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  show= false;
  constructor(svc: Service,private crd: ChangeDetectorRef){}
  showData(event){
    this.show = event;
    // this.crd.detectChanges(); // this stops the error
  }
}

As you can see that adding this.crd.detectChanges(); stops the error by letting angular know that this is part which requires another change detection.

But, I came across this answer on SO where this error basically represents BAD design. and using detectChanges() seems more like a fix as I have to write it explicitly.

Can someone help me with the GOOD design where I don't have to write it explicitly detectChanges() at the places where the values will change in lifecycles.

This might [help](https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4) — Vikas, Jun 10 '18 at 14:12
why are you emitting an event from ngOnInit? that would cause the error you're seeing. — Michael Kang, Jun 10 '18 at 21:29
@pixelbits Please feel free to update my stackblitz code to correct it — Samuel, Jun 16 '18 at 18:27

score 7 · Accepted Answer · answered Jun 17 '18 at 10:59

So, I investigated what should be the best approach to implement what you have written. I asked the same question to Max. What I can conclude is that

Angular follows Unidirectional flow of data, as you can read over here

In your case, you are basically changing the value of show in the middle of CD. What happens now, is that when CD is triggered 2nd time in DEV mode, it finds out that you have changed parent data from child component using EventEmitter. This contradicts with the Unidirectional flow of Angular. Possible solutions in your case,

Use this.crd.detectChanges() to let the angular know explicitly that you have changed the value , and so the angular will be kind enough to run CD again and won't throw any error
OR, implement the show behavior in the child itself rather than going against the flow of Parent -> Child.

Yes, it worked. I had a simular issue. Thanks. After the childcontrol fires the event I use the this.crd.detectChanges(); — Mark, Jan 19 '23 at 11:05

score 1 · Answer 2 · answered Jun 10 '18 at 15:32

When you run your app in dev mode (default), the change detector walks through the tree of your components twice:

To ensure that you don't have any code in the lifecycle hooks that can result in UI changes (I guess, your code violates this by emitting event from ngOnInit).
Syncronize the UI with the code

So ask yourself if you really need to emit this message from ngOnInit that can cause UI changes elsewhere? If you can't find a better place to do it, try to move the code in the setTimeout() function, which will ensure that this code is invoked on the next event loop cycle, when change detector is done with its pass.

ExpressionChangedAfterItHasBeenCheckedError : when Event emitted from Child Component

2 Answers2