TabMenu: Highlight does not update when selecting routerLink to unloaded module

[dcbroad3]

Describe the bug

When using the TabMenu with options that open router links to standalone components / lazy loaded modules, the active menu item is not updated when you click on those options for the first time (since they have not been loaded yet).

Note: This only seems to be an issue when using a custom item template.

The issue seems to be that the isActive function in the TabMenu template checks the router state at the time change detection is run, but since the route has not been loaded when that function is called, it does not match. Later, when the route is finished updating, the component is not checked again because the change detection strategy is OnPush. If change detection is run manually, the highlighed option is correctly updated.

Environment

See StackBlitz example. Angular 17.2.x, PrimeNG 17.10.x

Reproducer

https://stackblitz.com/edit/wrtgnz?file=src%2Fapp%2Fdemo%2Ftab-menu-basic-demo.html

Angular version

17.2

PrimeNG version

17.10

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18

Browser(s)

No response

Steps to reproduce the behavior

In stackblitz link:

1. Note that the initial route does not get highlighted when you first load the application
2. Click "Home", it will be highlighted
3. Click "Calendar", it will navigate but not highlight
4. Click "Calendar" again, it will highlight

Expected behavior

No response

[dcbroad3]

Side note: This issue did not appear with Angular 16 / PrimeNG 16. I assume this is not a regression in PrimeNG but rather due to a change in behavior in Angular 17, because it doesn't seem this module has undergone significant changes for v17.

[dcbroad3]

I was using the custom item templates to enable runtime translations. I can instead use an observable for the items, generating a new list of tab menu items any time the language changes, and then remove the custom item template, and that serves as a workaround.

I have also found an acceptable workaround is to add a click handler on the custom item template, watch for one NavigationEnd event in the router.events observable, and then call markForCheck on the tabmenu.