How can i implement route AND component animations in angular

I am trying to create some fancy routing animations in angular like the following:*0LQxfcOWMwGhr6jEkrKJIA.gif

I can create the route transitions/animations using this blog post:

I can also create the page/component animations with no issues.

my problem is when i try to use the two together.
Angular seems to favour one over the other rather than transitioning parent then child.

There is also the added complication of animating OUT component level animations on route change.
I originally tried to use the :leave animation for triggering this but because the whole page/component is removed obviously the component level animations can’t animate out.

So i suppose the two questions here are:

How can i combine route level animations with page level animations?
How can i wait for component level animations to finish before moving routes?

is there a way to animate OUT the component elements along with the route animation when leaving a page?

Here is a basic stackblitz with route animation and component animation in home.component.ts
You can see the route animations working and if you comment out [@routerTransition]="getState(o)" in app.component.html you can see the component animation working

Source: Angular Questions