How to avoid NG0100 when Child component emits event to Parent at ngOnInit?

I'm facing an NG0100 issue illustrated by the following StackBlitz example: StackBlitz NG0100.

Open the StackBlitz Console to see the error.

The context

• A child component (ChildComponent) exposes an init EventEmitter triggered at ngOnInit.
• A parent component (ParentComponent) subscribes to the child component init event, in which the it simulates an API call, changing the binded value loading.

Observation


In parent.component.html

<p>Parent Works!</p>

<!-- COMMENTING THE BINDING BELOW AVOIDS NG0100 -->
loading binding 1: {{ loading }}
<app-child (init)="onChildInit($event)"></app-child>
<!-- BUT THIS SAME BINDING NEVER TRIGGERS NG0100 -->
loading binding 2: {{ loading }}



It appears that when Angular loads the parent template:

1. Angular gets the loading value of binding 1: value is false.
2. Angular initializes the child component, calls ChildComponent.ngOnInit, emits init event which changes the loading value of the parent to true, raising the NG0100 error.
3. Angular gets the loading value of binding 2: value is always true at that time (no problem).

Requirements


I have 2 requirements:

1. For graphical reasons, I need the binding 1.
2. I really need the child component to emit the init event once it has been initialized for the first time (ngOnInit or other) for initiating the data loading in the parent, because the child component sends some data (illustrated by the Math.random()) that I can't access another way.

Any nice solution would be appreciated...

I have just added my real use case based on PrimeNG Table Here.

Continue reading...