In angular 11 I'm dynamically rendering a navigation component. So have code like this:
<li [routerLinkActive]="active">
<a [routerLink]="navItem.route">navItem.linkText</a>
</li>
This is fine except where I've a nav section that isn't actually a route but rather triggers subitems to open. I still want the routerLinkActive to correctly apply the class but I don't want it to navigate anywhere.
The route value is empty but this doesn't work, so I've tried setting it to an empty array like this:
<li [routerLinkActive]="active">
<a [routerLink]="navItem.route ? navItem.route: []">navItem.linkText</a>
</li>
But the empty array is interpreted as linking to my homepage so on initial render the homepage link is highlighted but so are any sub items that have empty routes.
Is there a way in angular to dynamically create a navigation like I'm doing, have the routerlinkactive directive correctly apply the class but for the link to not actually navigate anywhere?