Detecting if an Angular route came from a child/sub router-outlet

I have an Angular 19 app, and I've added the route transition animations. Docs for that are here: https://angular.dev/guide/animations/route-animations

In my application bootstrap, I have this:

bootstrapApplication(AppComponent, {
providers: [
provideRouter(APP_ROUTES, withViewTransitions()),
]
});


And then I add this to my app.component.css

::view-transition-old,
::view-transition-new {
animation-duration: 200ms;
animation-name: -ua-view-transition-fade-in;
}

::view-transition-old {
animation-name: -ua-view-transition-fade-out;
}


I now have a fading transition between all routes!

Some components have a child <router-outlet /> element which displays a section of the page. These are also fading with the transition and I don't want them to. I only want the transition to happen on "full page" router changes at the top-level <router-outlet/>.

The withViewTransitions() function allows a configuration method to be passed in where i can tell it how to skip certain transitions. In that context can inject anything I need, and it provides from and to which are both ActivatedRouteSnapshots. What do I need to look for on these ActivatedRouteSnapshots to determine if they came form a child router outlet or not?

withViewTransitions({
onViewTransitionCreated: ({ transition, from, to }) => {
console.log(from)

const isChildRouterOutlet = ????

if (isChildRouterOutlet) {
transition.skipTransition();
}
},
})

Continue reading...