Angular(5) - uiCanExit - trigger animation before component destruction

[BenLune]

Hi, Thank you so much for what your doing with ui-router. We use it on all our projects as a bridge between Drupal and Angular, it's very useful and powerful. I'm working now with Angular 5 and I try to understand how uiCanExit function works in a component. I'd like to use it to trigger an animation before component destruction. It mays not not be the right way to do it, but I'm looking everywhere and I don't see any example. I had also a look at the source code and it's still not clear for me. Any help would be very appreciated. Thank you !

[christopherthielen]

I'm admittedly not very familiar with Angular animations. I suspect there's a nice way to do this declaratively (without using uiCanExit)

That said, the uiCanExit component hook can be used to do any async action when a routed component is about to be destroyed because its state is being exited.
Here's an example showing how one could hook the uiCanExit callback up to the animations API. I highly doubt this is idiomatic angular animation though, and recommend looking into how this can be done declaratively

[christopherthielen]

Here's a more declarative approach https://stackblitz.com/edit/ui-router-fade-transitions?file=app/app.component.ts

This is based on https://medium.com/@tanya/angular4-animated-route-transitions-b5b9667cd67c

See #165

[BenLune]

Thank you very much for your answers ! My goal is to keep alive the view while the state is changing to make it disappear with a transition animation. Like if in the last example we had a cross fade transition between the birds. If I could have the possibility to handle the removing/detaching of the view my self, it would be awesome. Thanks again, Bye