Angular child router-outlet removes content before parent outlet animates out
I have setup some animations that work with the main app router-outlet, but when one of those routes has children and a child outlet, when I navigate away, the child outlet content is removed immediately, thus negating the animation. Is there some way to have the content persist on navigate out so that the content is not removed prior to the animation completing? Perhaps with another animation handling :leave on that child outlet?
Including a StackBlitz: https://stackblitz.com/edit/angular-7tfkp4
You'll notice that when you go to projects, then navigate away, the content in the child router outlet disappears right away.
Using:
Angular CLI: 7.0.5
Node: 10.5.0
OS: win32 x64
Angular: 7.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router
angular angular-animations
asked Nov 13 '18 at 2:09
codephobia
1,0012929
add a comment |
I have setup some animations that work with the main app router-outlet, but when one of those routes has children and a child outlet, when I navigate away, the child outlet content is removed immediately, thus negating the animation. Is there some way to have the content persist on navigate out so that the content is not removed prior to the animation completing? Perhaps with another animation handling :leave on that child outlet?
Including a StackBlitz: https://stackblitz.com/edit/angular-7tfkp4
You'll notice that when you go to projects, then navigate away, the content in the child router outlet disappears right away.
Using:
Angular CLI: 7.0.5
Node: 10.5.0
OS: win32 x64
Angular: 7.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router
angular angular-animations
asked Nov 13 '18 at 2:09
codephobia
1,0012929
First, I do not understand what does 'navigating away' mean, everything looks right in your stackblitz. Second, is the doc what you want? angular.io/guide/…
– wannadream
Nov 13 '18 at 4:11
Can you show us the code?
– KiraAG
Nov 13 '18 at 5:09
@KiraAG I have already included a stackblitz link showing the issue.
– codephobia
Nov 14 '18 at 19:33
@wannadream When you go to projects, then go to home or about, the content in projects (loaded via the child router outlet) vanishes immediately, rather than waiting for the animation to finish first.
– codephobia
Nov 14 '18 at 19:40
I changed the stackblitz url to be the one with the code editor as well. Oops.
– codephobia
Nov 14 '18 at 23:23
add a comment |
I have setup some animations that work with the main app router-outlet, but when one of those routes has children and a child outlet, when I navigate away, the child outlet content is removed immediately, thus negating the animation. Is there some way to have the content persist on navigate out so that the content is not removed prior to the animation completing? Perhaps with another animation handling :leave on that child outlet?
Including a StackBlitz: https://stackblitz.com/edit/angular-7tfkp4
You'll notice that when you go to projects, then navigate away, the content in the child router outlet disappears right away.
Using:
Angular CLI: 7.0.5
Node: 10.5.0
OS: win32 x64
Angular: 7.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router
angular angular-animations
asked Nov 13 '18 at 2:09
codephobia
1,0012929
I have setup some animations that work with the main app router-outlet, but when one of those routes has children and a child outlet, when I navigate away, the child outlet content is removed immediately, thus negating the animation. Is there some way to have the content persist on navigate out so that the content is not removed prior to the animation completing? Perhaps with another animation handling :leave on that child outlet?
Including a StackBlitz: https://stackblitz.com/edit/angular-7tfkp4
You'll notice that when you go to projects, then navigate away, the content in the child router outlet disappears right away.
Using:
Angular CLI: 7.0.5
Node: 10.5.0
OS: win32 x64
Angular: 7.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router
angular angular-animations
angular angular-animations
asked Nov 13 '18 at 2:09
codephobia
1,0012929
asked Nov 13 '18 at 2:09
codephobia
1,0012929
edited Nov 14 '18 at 23:21
asked Nov 13 '18 at 2:09
codephobia
1,0012929
asked Nov 13 '18 at 2:09
codephobia
1,0012929
asked Nov 13 '18 at 2:09
codephobia
1,0012929
1,0012929
First, I do not understand what does 'navigating away' mean, everything looks right in your stackblitz. Second, is the doc what you want? angular.io/guide/…
– wannadream
Nov 13 '18 at 4:11
Can you show us the code?
– KiraAG
Nov 13 '18 at 5:09
@KiraAG I have already included a stackblitz link showing the issue.
– codephobia
Nov 14 '18 at 19:33
@wannadream When you go to projects, then go to home or about, the content in projects (loaded via the child router outlet) vanishes immediately, rather than waiting for the animation to finish first.
– codephobia
Nov 14 '18 at 19:40
I changed the stackblitz url to be the one with the code editor as well. Oops.
– codephobia
Nov 14 '18 at 23:23
add a comment |
First, I do not understand what does 'navigating away' mean, everything looks right in your stackblitz. Second, is the doc what you want? angular.io/guide/…
– wannadream
Nov 13 '18 at 4:11
Can you show us the code?
– KiraAG
Nov 13 '18 at 5:09
@KiraAG I have already included a stackblitz link showing the issue.
– codephobia
Nov 14 '18 at 19:33
@wannadream When you go to projects, then go to home or about, the content in projects (loaded via the child router outlet) vanishes immediately, rather than waiting for the animation to finish first.
– codephobia
Nov 14 '18 at 19:40
I changed the stackblitz url to be the one with the code editor as well. Oops.
– codephobia
Nov 14 '18 at 23:23
First, I do not understand what does 'navigating away' mean, everything looks right in your stackblitz. Second, is the doc what you want? angular.io/guide/…
– wannadream
Nov 13 '18 at 4:11
First, I do not understand what does 'navigating away' mean, everything looks right in your stackblitz. Second, is the doc what you want? angular.io/guide/…
– wannadream
Nov 13 '18 at 4:11
Can you show us the code?
– KiraAG
Nov 13 '18 at 5:09
Can you show us the code?
– KiraAG
Nov 13 '18 at 5:09
@KiraAG I have already included a stackblitz link showing the issue.
– codephobia
Nov 14 '18 at 19:33
@KiraAG I have already included a stackblitz link showing the issue.
– codephobia
Nov 14 '18 at 19:33
@wannadream When you go to projects, then go to home or about, the content in projects (loaded via the child router outlet) vanishes immediately, rather than waiting for the animation to finish first.
– codephobia
Nov 14 '18 at 19:40
@wannadream When you go to projects, then go to home or about, the content in projects (loaded via the child router outlet) vanishes immediately, rather than waiting for the animation to finish first.
– codephobia
Nov 14 '18 at 19:40
I changed the stackblitz url to be the one with the code editor as well. Oops.
– codephobia
Nov 14 '18 at 23:23
I changed the stackblitz url to be the one with the code editor as well. Oops.
– codephobia
Nov 14 '18 at 23:23
add a comment |
1 Answer
1
active
oldest
votes
Seems like the problem may be because you do not have a router reuse strategy.
There is a great answer here: https://stackoverflow.com/a/41515648/9097714 with the information on how to implement it.
Basically, through navigation you are discarding the last view, and it is completely re-rendering on return.
Of course, without the source code, this is just an educated guess and with more information it would make it easier to respond.
answered Nov 14 '18 at 16:00
Jmsdb
44417
There is a Stackblitz showing the issue if that helps.
– codephobia
Nov 14 '18 at 19:34
Yep, seems I needed to cache the route. Thanks for pointing me in the right direction!
– codephobia
Nov 15 '18 at 3:52
1
Upvoted. Also on an alternative note, A more detailed implementation of child routing animations is available at this link . For demo animations by mattias nimela. Just putting it out there if some one needs more clearer understanding.
– KiraAG
Nov 15 '18 at 5:07
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%2f53272764%2fangular-child-router-outlet-removes-content-before-parent-outlet-animates-out%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
Seems like the problem may be because you do not have a router reuse strategy.
There is a great answer here: https://stackoverflow.com/a/41515648/9097714 with the information on how to implement it.
Basically, through navigation you are discarding the last view, and it is completely re-rendering on return.
Of course, without the source code, this is just an educated guess and with more information it would make it easier to respond.
answered Nov 14 '18 at 16:00
Jmsdb
44417
There is a Stackblitz showing the issue if that helps.
– codephobia
Nov 14 '18 at 19:34
Yep, seems I needed to cache the route. Thanks for pointing me in the right direction!
– codephobia
Nov 15 '18 at 3:52
1
Upvoted. Also on an alternative note, A more detailed implementation of child routing animations is available at this link . For demo animations by mattias nimela. Just putting it out there if some one needs more clearer understanding.
– KiraAG
Nov 15 '18 at 5:07
add a comment |
Seems like the problem may be because you do not have a router reuse strategy.
There is a great answer here: https://stackoverflow.com/a/41515648/9097714 with the information on how to implement it.
Basically, through navigation you are discarding the last view, and it is completely re-rendering on return.
Of course, without the source code, this is just an educated guess and with more information it would make it easier to respond.
answered Nov 14 '18 at 16:00
Jmsdb
44417
There is a Stackblitz showing the issue if that helps.
– codephobia
Nov 14 '18 at 19:34
Yep, seems I needed to cache the route. Thanks for pointing me in the right direction!
– codephobia
Nov 15 '18 at 3:52
1
Upvoted. Also on an alternative note, A more detailed implementation of child routing animations is available at this link . For demo animations by mattias nimela. Just putting it out there if some one needs more clearer understanding.
– KiraAG
Nov 15 '18 at 5:07
add a comment |
Seems like the problem may be because you do not have a router reuse strategy.
There is a great answer here: https://stackoverflow.com/a/41515648/9097714 with the information on how to implement it.
Basically, through navigation you are discarding the last view, and it is completely re-rendering on return.
Of course, without the source code, this is just an educated guess and with more information it would make it easier to respond.
answered Nov 14 '18 at 16:00
Jmsdb
44417
Seems like the problem may be because you do not have a router reuse strategy.
There is a great answer here: https://stackoverflow.com/a/41515648/9097714 with the information on how to implement it.
Basically, through navigation you are discarding the last view, and it is completely re-rendering on return.
Of course, without the source code, this is just an educated guess and with more information it would make it easier to respond.
answered Nov 14 '18 at 16:00
Jmsdb
44417
answered Nov 14 '18 at 16:00
Jmsdb
44417
answered Nov 14 '18 at 16:00
Jmsdb
44417
answered Nov 14 '18 at 16:00
Jmsdb
44417
44417
There is a Stackblitz showing the issue if that helps.
– codephobia
Nov 14 '18 at 19:34
Yep, seems I needed to cache the route. Thanks for pointing me in the right direction!
– codephobia
Nov 15 '18 at 3:52
1
Upvoted. Also on an alternative note, A more detailed implementation of child routing animations is available at this link . For demo animations by mattias nimela. Just putting it out there if some one needs more clearer understanding.
– KiraAG
Nov 15 '18 at 5:07
add a comment |
There is a Stackblitz showing the issue if that helps.
– codephobia
Nov 14 '18 at 19:34
Yep, seems I needed to cache the route. Thanks for pointing me in the right direction!
– codephobia
Nov 15 '18 at 3:52
1
Upvoted. Also on an alternative note, A more detailed implementation of child routing animations is available at this link . For demo animations by mattias nimela. Just putting it out there if some one needs more clearer understanding.
– KiraAG
Nov 15 '18 at 5:07
There is a Stackblitz showing the issue if that helps.
– codephobia
Nov 14 '18 at 19:34
There is a Stackblitz showing the issue if that helps.
– codephobia
Nov 14 '18 at 19:34
Yep, seems I needed to cache the route. Thanks for pointing me in the right direction!
– codephobia
Nov 15 '18 at 3:52
Yep, seems I needed to cache the route. Thanks for pointing me in the right direction!
– codephobia
Nov 15 '18 at 3:52
1
1
Upvoted. Also on an alternative note, A more detailed implementation of child routing animations is available at this link . For demo animations by mattias nimela. Just putting it out there if some one needs more clearer understanding.
– KiraAG
Nov 15 '18 at 5:07
Upvoted. Also on an alternative note, A more detailed implementation of child routing animations is available at this link . For demo animations by mattias nimela. Just putting it out there if some one needs more clearer understanding.
– KiraAG
Nov 15 '18 at 5:07
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53272764%2fangular-child-router-outlet-removes-content-before-parent-outlet-animates-out%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
First, I do not understand what does 'navigating away' mean, everything looks right in your stackblitz. Second, is the doc what you want? angular.io/guide/…
– wannadream
Nov 13 '18 at 4:11
Can you show us the code?
– KiraAG
Nov 13 '18 at 5:09
@KiraAG I have already included a stackblitz link showing the issue.
– codephobia
Nov 14 '18 at 19:33
@wannadream When you go to projects, then go to home or about, the content in projects (loaded via the child router outlet) vanishes immediately, rather than waiting for the animation to finish first.
– codephobia
Nov 14 '18 at 19:40
I changed the stackblitz url to be the one with the code editor as well. Oops.
– codephobia
Nov 14 '18 at 23:23