I have a custom component my-panel(just a wraper for p-panel. html code for my-panel is same as primeng panel,We are extending to do any customizations if required) that extends PrimeNG’s Panel (version 19.1.4). It uses Angular animations for expand/collapse: When I use my-panel outside routing, animations work perfectly. But when the same component is rendered inside a router-outlet, the animation never starts:

collapsed toggles correctly (verified via console logs). The content never collapses visually. (@panelContent.done) never fires, so animating stays true forever.

What I’ve Tried

1. Verified BrowserAnimationsModule is imported in AppModule (not in lazy modules).
2. Added ChangeDetectorRef.markForCheck() and detectChanges() in ngAfterViewInit().
3. Added delays (setTimeout) before toggling to wait for DOM stability.
4. Added CSS fallback with max-height and transitions for smooth collapse. This makes sure that the panel is collapsing/expanding but when navigating to another route, panel content appears on the new page.

Current Issues

1. Angular animation engine still does not run inside router-outlet.

2. When navigating to another route, panel content appears on the new page because it’s still in DOM.

Any help would be greatly appreciated.