A projected template is subject to a ChangeDetectionRef which is not controlling the template

[HarmenM]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request

Current behavior
When projecting a template into another component as a ContentChild, the template is subjected to the ChangeDetectorRef of the host component and not of the component in which the template is defined. This results in a situation in which a projected component is not notified of changes.

Expected behavior
A template needs to be independent of the changeDetectionRef in which the template is projected, because there is no direct relation between the two components.

Minimal reproduction of the problem with instructions
A reproduction of the issue can be found here: https://plnkr.co/edit/tU4EPzvtDSoPBlMuwvRH?p=preview

This plunkr reproduces the problem. A template containing a ProjectedComponent is projected into the TestComponent. All of this is defined in the TestApp Component. The ProjectedComponent has an @Input which can be changed by editing the input element. However, due to the OnPush changedetection stategy of the TestComponent, the value is not updated in the ProjectedComponent.

It seems that the projected content is subject to the wrong ChangeDetectionStrategy making it impossible to project rich content into another component without (somehow) exposing the changedetection strategy of the host component.

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

Please tell us about your environment:
Just a browser (JIT)

• Angular version: 2.X

• Browser: all

• Language: Typescript

[Hikariii]

Pinging to see if anyone can verify / label this issue

[DzmitryShylovich]

When projecting a template into another component as a ContentChild, the template is subjected to the ChangeDetectorRef of the host component and not of the component in which the template is defined

sounds reasonable to me. @mhevery what do you think?

[tbosch]

Agree, we should change this.

[tbosch]

Needed for G3 as well!

[robeverett]

I'm suffering from this in Angular 6.
What is the solution ?

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: '. Current value: 'ngIf: undefined'.
AppComponent.html:10
ERROR CONTEXT
AppComponent.html:10
DebugContext_ {view: Object, nodeIndex: 10, nodeDef: Object, elDef: Object, elView: Object}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}