ExpressionChangedAfterItHasBeenCheckedError thrown on change detection when TemplatePortal attached to...
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have the following component structure: App -> GrandParent -> Parent -> Child.
- The ChildComponennt declares a
<ng-template cdkPortal>in its template. - 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
ExpressionChangedAfterItHasBeenCheckedErroris thrown during the first change detection run. Every subsequent update ininput[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 !
angular angular-cdk asked Nov 23 '18 at 13:52
PeterPeter
203
add a comment |
I have the following component structure: App -> GrandParent -> Parent -> Child.
- The ChildComponennt declares a
<ng-template cdkPortal>in its template. - 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
ExpressionChangedAfterItHasBeenCheckedErroris thrown during the first change detection run. Every subsequent update ininput[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 !
angular angular-cdk asked Nov 23 '18 at 13:52
PeterPeter
203
add a comment |
I have the following component structure: App -> GrandParent -> Parent -> Child.
- The ChildComponennt declares a
<ng-template cdkPortal>in its template. - 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
ExpressionChangedAfterItHasBeenCheckedErroris thrown during the first change detection run. Every subsequent update ininput[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 !
angular angular-cdk asked Nov 23 '18 at 13:52
PeterPeter
203
I have the following component structure: App -> GrandParent -> Parent -> Child.
- The ChildComponennt declares a
<ng-template cdkPortal>in its template. - 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
ExpressionChangedAfterItHasBeenCheckedErroris thrown during the first change detection run. Every subsequent update ininput[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 !
angular angular-cdk angular angular-cdk asked Nov 23 '18 at 13:52
PeterPeter
203
asked Nov 23 '18 at 13:52
PeterPeter
203
asked Nov 23 '18 at 13:52
PeterPeter
203
asked Nov 23 '18 at 13:52
PeterPeter
203
asked Nov 23 '18 at 13:52
PeterPeter
203
203
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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)
answered Nov 28 '18 at 7:43
Vladimír HudobaVladimír Hudoba
1018
great. thank you very much! I am marking this as an answer since it solves the problem I am facing here, but still I woud also be interested how to achieve this using cdkPortal.
– Peter
Nov 28 '18 at 7:52
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447974%2fexpressionchangedafterithasbeencheckederror-thrown-on-change-detection-when-temp%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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)
answered Nov 28 '18 at 7:43
Vladimír HudobaVladimír Hudoba
1018
great. thank you very much! I am marking this as an answer since it solves the problem I am facing here, but still I woud also be interested how to achieve this using cdkPortal.
– Peter
Nov 28 '18 at 7:52
add a comment |
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)
answered Nov 28 '18 at 7:43
Vladimír HudobaVladimír Hudoba
1018
great. thank you very much! I am marking this as an answer since it solves the problem I am facing here, but still I woud also be interested how to achieve this using cdkPortal.
– Peter
Nov 28 '18 at 7:52
add a comment |
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)
answered Nov 28 '18 at 7:43
Vladimír HudobaVladimír Hudoba
1018
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)
answered Nov 28 '18 at 7:43
Vladimír HudobaVladimír Hudoba
1018
edited Nov 28 '18 at 8:36
answered Nov 28 '18 at 7:43
Vladimír HudobaVladimír Hudoba
1018
answered Nov 28 '18 at 7:43
Vladimír HudobaVladimír Hudoba
1018
answered Nov 28 '18 at 7:43
Vladimír HudobaVladimír Hudoba
1018
1018
great. thank you very much! I am marking this as an answer since it solves the problem I am facing here, but still I woud also be interested how to achieve this using cdkPortal.
– Peter
Nov 28 '18 at 7:52
add a comment |
great. thank you very much! I am marking this as an answer since it solves the problem I am facing here, but still I woud also be interested how to achieve this using cdkPortal.
– Peter
Nov 28 '18 at 7:52
great. thank you very much! I am marking this as an answer since it solves the problem I am facing here, but still I woud also be interested how to achieve this using cdkPortal.
– Peter
Nov 28 '18 at 7:52
great. thank you very much! I am marking this as an answer since it solves the problem I am facing here, but still I woud also be interested how to achieve this using cdkPortal.
– Peter
Nov 28 '18 at 7:52
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447974%2fexpressionchangedafterithasbeencheckederror-thrown-on-change-detection-when-temp%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
