In my app-component.ts, I have a menu structured like this:
<ul>
<li>
<a href="#" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
</li>
<li>
<a href="#" routerLink="/shop" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Shop</a>
</li>
</ul>
<router-outlet></router-outlet>
I also have a route file with the following paths and components:
export const appRoutes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'shop',
component: ChildComponent
},
{
path: 'details',
component: DetailComponent
}
];
Currently, the active state in the menu correctly selects the "Shop" item, but when navigating to the "Details" component from the shop page, the state is no longer active. Is there a way to maintain the active state in the menu for both components even while on another route?
You can see an example of this issue here: