Dynamic Sub-Navigation Bar Based on Selected Menu Item in Angular

Question

I am working on an Angular application where I have a main navigation bar that always stays visible. Some menu items (e.g., "Asset") should display a sub-navigation bar below the main navbar when clicked, while others should not. If another menu item with a different sub-navigation is clicked, the sub-nav should update accordingly. If a menu item without a sub-navigation is selected, the sub-nav should disappear.

I want to achieve this dynamically so that:

• Clicking on "Asset" shows sub-nav options (e.g., Properties, Vehicles, Asset History).
• Clicking on another menu item with a sub-nav updates the content.
• Clicking on a menu item without a sub-nav hides the sub-navigation completely. What is the best approach to implement this behavior in Angular? Should I manage it using Angular routing, a service, or a combination of directives? Any example implementation or best practices would be appreciated.

What I have tried:

• Using ngIf to conditionally render a sub-nav based on a selected menu item.
• Experimented with Angular routing, but not sure if lazy loading is needed.
• Considered using a service to manage the state of the sub-navigation.

Would love to hear the best approach to handle this efficiently. Thanks!