Angular: set specific routing link active when on child route

Question

I have a set of routes:

{
  path: 'user-management',
  component: UserManagementComponent,
},
{
  path: 'user-management/profile',
  component: UserProfileManagementComponent
},
{
  path: 'user-management/groups',
  component: UserGroupManagementComponent
},
{
  path: 'user-management/permissions',
  component: PermissionsManagementComponent
},

and a set of links:

<div class="row p-section-sub-menu-outer-row-border">
  <div class="col-xs-4 col-sm-4 p-section-sub-menu"
       routerLink="/user-management/groups"
       [routerLinkActiveOptions]="{exact:true}"
       routerLinkActive="p-section-sub-menu-selected">
    {{'USER_MANAGEMENT.MANAGE_USER_GROUPS' | translate}}
  </div>
  <div class="col-xs-4 col-sm-4 p-section-sub-menu"
       routerLink="/user-management"
       [routerLinkActiveOptions]="{exact:true}"
       routerLinkActive="p-section-sub-menu-selected">
    {{'USER_MANAGEMENT.USER_MANAGEMENT' | translate}}
  </div>
  <div class="col-xs-4 col-sm-4 p-section-sub-menu"
       routerLink="/user-management/permissions"
       [routerLinkActiveOptions]="{exact:true}"
       routerLinkActive="p-section-sub-menu-selected">
    {{'USER_MANAGEMENT.MANAGE_USER_PERMISSIONS' | translate}}
  </div>
</div>

The problem is that the UserProfileManagementComponent when active doesn't highlight the UserManagementComponent link because of the routerLinkActiveOptions.

Is there a way to force it to be active somehow?

Answer 1

Ended up using the solution mentioned in the RouterLinkActiveOptions class (a hacky one, but does the trick for me):

  <div class="col-xs-4 col-sm-4 p-section-sub-menu"
       [routerLinkActiveOptions]="{exact:true}"
       routerLink="/user-management"
       routerLinkActive="p-section-sub-menu-selected">
    {{'USER_MANAGEMENT.USER_MANAGEMENT' | translate}}
    <span routerLink="/user-management"></span>
    <span routerLink="/user-management/profile"></span>
  </div>