javascriptangulartypescriptrxjsobservable

Observing @Output Event Emitters in Child Components?

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 it's a non conventional way of changing an @Input change detection is missing the changes, we need to run it manually.

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

    Stackblitz