How to prevent Angular View Transitions on layout switch and initial load in nested router...

I'm implementing View Transitions API in Angular 20+ with nested router outlets and need to prevent animations in specific scenarios. I have two main layouts (auth and dashboard) and want to:

• Skip animations on first load of any layout
• Skip animations when switching between different layouts (auth ↔ dashboard)
• Allow animations within the same layout (e.g., sign-in ↔ forgot-password, dashboard ↔ users)

The Problem

I can't reliably detect when I'm switching between different layout components vs navigating within the same layout. The to and from route snapshots in onViewTransitionCreated don't seem to contain the parent layout information.

What I've Tried

Component lifecycle hooks - ngOnDestroy has timing issues with view transitions

Router events - Complex with nested outlets

Route snapshot traversal - Can't access parent layout component data

Expected Behavior First load: No animation (instant)

Layout switch (auth ↔ dashboard): No animation

Same layout navigation (sign-in ↔ forgot-password): Smooth animation

Same layout navigation (dashboard ↔ users): Smooth animation

How can I detect layout changes in onViewTransitionCreated to conditionally skip transitions?

// app.config.ts

withViewTransitions({
skipInitialTransition: true,
onViewTransitionCreated: ({ transition, to, from }) => {
const router = inject(Router);
const navigation = router.currentNavigation();

const config: IsActiveMatchOptions = {
paths: 'exact',
fragment: 'ignored',
matrixParams: 'exact',
queryParams: 'ignored'
};

if (router.isActive(navigation!.finalUrl!, config)) {
transition.skipTransition();
return;
}

// HOW TO DETECT LAYOUT CHANGES HERE?
}
});


Layout Components

@Component({
selector: 'auth-layout',
template: `<div style="view-transition-name: auth-outlet"><router-outlet /></div>`,
})
export class AuthLayout {}

@Component({
selector: 'dashboard-layout',
template: `<div style="view-transition-name: dashboard-outlet"><router-outlet /></div>`,
})
export class DashboardLayout {}


export const appRoutes: TRoute[] = [
{
path: '',
component: AuthLayout,
data: {
access: 'guest',
},
canActivate: [accessControlGuard],
loadChildren: () => import('./pages/auth/auth.routes').then((m) => m.authRoutes)
},
{
path: '',
component: DashboardLayout,
data: {
access: 'protected',
},
canActivate: [accessControlGuard],
children: [
{
path: 'dashboard',
loadChildren: () => import('./pages/dashboard/dashboard.routes').then((m) => m.dashboardRoutes)
}
]
}
];

Continue reading...