ngOnChanges not being called on child of dynamically created component.

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

When dynamically creating components, manually changing a property of a child component of that created component and then triggering changeDetection, ngOnChanges on this child component does not get called. The strange thing, the template does gets updated.

app.component
-> outer.component // will be created dynamically by a portal(outlet)
---> inner.component // is a child of outer, we are setting a property manually here

Expected behavior

ngOnChanges should be called when a property has been changed and the CD has been run.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-ubaqh9

I created 4 cases.

• Case 1: Setting text directly on inner component and triggering change detection on the app component. ngOnChanges in inner component does NOT get called
• Case 2: Setting text directly on inner component and triggering change detection on the outer component. ngOnChanges in inner component does NOT get called
• Case 3: Setting text on the outer component so text binding should resolve and triggering change detection on the outer component. ngOnChanges in inner component DOES get called -> OK
• Case 4: Setting text directly on inner component and triggering change detection also on the inner component. ngOnChanges in inner component does NOT get called

What is the motivation / use case for changing the behavior?

We got this usecase where we have to create components dynamically and set some properties of their child components. This change of the property should run some logic in ngOnChanges method.

Environment

Angular version: 6.1.0

[alexzuza]

NgOnChanges hook will be called only if you change props on parent component so it works as expected for me.

[kara]

@thomaspink Thanks for creating such a detailed repro! The behavior you describe is “working as intended”, but I can see how it might be confusing. The gist of it is that ngOnChanges is called when a component’s input bindings are changed through the template (as opposed to when the input property is changed directly).

In other words, it’s the value that goes into the [text]="innerText" input binding that must change (outer.innerText), not the value of the property that “receives” the input (inner.text). If you change inner.text directly, you’re circumventing the binding entirely, which is where the mechanism for tracking ngOnChanges lives.

I agree that this is not well-documented yet, and given how it’s a bit counterintuitive, we should probably revisit the original decision to limit ngOnChanges to bindings only. But because others have voiced the same concern, we have a few open issues that cover this use case already. See https://github.com/angular/angular/issues/35614 and https://github.com/angular/angular/issues/22567. To keep things simple, let’s continue to track the issue there.