ExpressionChangedAfterItHasBeenCheckedError thrown on change detection when TemplatePortal attached to parents PortalOutlet

Question

I have the following component structure: App -> GrandParent -> Parent -> Child .

1. The ChildComponennt declares a <ng-template cdkPortal> in its template.
2. AppComponent, GrandParentComponent and ParentComponent each declares a <ng-template cdkPortalOutput> in their respective templates.

Now, if the the ChildComponent attaches its portal property:

• ... to the ParentComponent - everything works as expected. You can update the input[text] and the change nicely propagates down into the TemplatePortal.
• to the GrandParentComponent - the ExpressionChangedAfterItHasBeenCheckedError is thrown during the first change detection run. Every subsequent update in input[text] results in the same error. The state of the TemplatePortal is "one step behind" (meaning - if I type "abc" into the input, the value in TemplatePortal equals "ab")
• to the AppComponent - same behaviour as GrandParentComponent except for the initial error.

Stackblitz: https://stackblitz.com/edit/portal-cdk?file=src%2Fapp%2Fchild%2Fchild.component.ts (uncomment calls in ChildComponent#ngOnInit )

Does somebody have an explanation for this behaviour? What would be the proper way to use the CDK's portal to display a TemplatePortal in a PortalOutlet located a couple of components above?

Thanks !

Answer 1

I wasn't able to find solution to your problem and If anyone knows, I'm interested as well, however at least I created workaround for you. It doesn't use cdk-portal , just Angular's viewContainerRef , but I belive cdk-portal uses similar approach.

Stackblitz: https://stackblitz.com/edit/portal-cdk-uiyxhn (uncomment calls in ChildComponent#ngOnInit )