Observing @Output Event Emitters in Child Components?

Issue

How should be go about using / observing parent @Output() event emitters in child components?

For example in this demo the child component uses the @Output onGreetingChange like this:

<app-greeting [greeting]="onGreetingChange | async"></app-greeting>

And this will work if onGreetingChange emits in the AfterViewInit life cycle hook.

  ngAfterViewInit() {
    this.onGreetingChange.emit('Hola');
  }

However that produces the an ExpressionChangedAfterItHasBeenCheckedError error.

Is there a way to get to this to work without producing the error?

I tried emitting in both the constructor and OnInit. Thoughts?

Solution

You can trigger the change detection manually, using detectChanges()

My guess is that since its a non conventional way of changing an @Input change detection is missing the changes, so we need to run it manually!

  ngAfterViewInit() {
    this.onGreetingChange.emit('Hola');
    this.cdr.detectChanges();
  }

stackblitz

Answered By - Naren Murali