1

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
codephobia
  • 1,580
  • 2
  • 17
  • 42
  • First, I do not understand what does 'navigating away' mean, everything looks right in your stackblitz. Second, is the doc what you want? https://angular.io/guide/transition-and-triggers#parent-child-animations – wannadream Nov 13 '18 at 04:11
  • Can you show us the code? – KiraAG Nov 13 '18 at 05: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

1 Answers1

2

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.

Jmsdb
  • 515
  • 3
  • 9
  • 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 03:52
  • 1
    Upvoted. Also on an alternative note, A more detailed implementation of child routing animations is available at this [link](https://github.com/matsko/animationsftw.in/blob/master/src/app/routing-page/routing-page.component.ts) . For demo [animations by mattias nimela](http://animationsftw.in/#/routing/page2). Just putting it out there if some one needs more clearer understanding. – KiraAG Nov 15 '18 at 05:07
  • @codephobia I was wondering if you were able to solve it? I was trying to understand how would a routing strategy would work in such a case, as (to me at least) it seems its use case is different. One would use them to return back to them, in your case however, you would want to dispose of the component a little later (i.e., once the animation finishes). – boring91 Jul 02 '20 at 15:12