Style button of dropdown toggle depending on RouterLinkActive of nav-link

Question

My Navbar contains 3 items: 2 times <li> with an <a> element and one dropdown btn-group. I want to highlight the dropdown toggle button when one of the nav-link dropdown options has been followed. Here's my code:

<ul class="navbar-nav mx-auto h-100 navigation-items">
  <li class="nav-item active">
    <a
      [routerLink]="['/app', 'tab1']"
      routerLinkActive="active-link"
      class="nav-link h-100"
      >Tab1</a
    >
  </li>

  <div class="btn-group dropdown" dropdown>
    <button
      class="btn btn-link nav-link h-100 dropdown-toggle"
      id="button-basic"
      dropdownToggle
      type="button"
-->      routerLinkActive="active-link"   <--- Doesn't work
    >
      Dropdown
      <fa-icon [icon]="faChevronDown" size="xs"></fa-icon>
    </button>
    <ul
      id="dropdown-basic"
      *dropdownMenu
      class="dropdown-menu main-nav"
      role="menu"
      aria-labelledby="button-basic"
    >
      <li role="menuitem">
        <a
          class="dropdown-item"
          [routerLink]="['/app', 'tab2', 'link1']"
          routerLinkActive="active-link"
          >Link1
        </a>
      </li>
      <li role="menuitem">
        <a
          class="dropdown-item"
          data-letter=""
          [routerLink]="['/app', 'tab2', 'link2']"
          routerLinkActive="active-link"
          >Link2
        </a>
     </li>
      <li role="menuitem">
        <a
          class="dropdown-item"
          [routerLink]="['/app', 'tab2', 'link3']"
          routerLinkActive="active-link"
          >Link3
        </a>
      </li>
    </ul>
  </div>

  <li class="nav-item active" fxLayoutAlign="center center">
    <a
      [routerLink]="['/app', 'tab3']"
      title="Inplannen"
      routerLinkActive="active-link"
      class="nav-link h-100"
      >Tab3</a
    >
  </li>
</ul>

I would like to change the style of the button based on whether one of the routerLinks of the dropdown menu items is active. However, since the button itself does not contain any routing information and the menu doesn't have a parent page of it's own, the solutions that I found on the internet did't work for me yet.

• As you can see, simply adding routerLinkActive="active-link" to the button element doesn't work.
• Adding routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}" to the parent btn-group works, but doesn't help me dynamically style the button itself. (source: https://angular.io/api/router/RouterLinkActive)
• Currently, the RouterLinkActive styling works fine on the <li> nav-item elements and the dropdown-items. I only want to add it to the <button> element.

Does anyone know a workaround? Or should I accept that it is not possible to directly style the button using RouterLinkActive?

If you need further clarification or my .scss file, please comment..

Answer 1

Good day!

The problem in your case that button hasn't router link directive, it can't handle router events and determines - is it the current route or no. The solution is to get the reference of the needed router link and use it in another place (where you want).

Check this quite basic example to get the idea:

<li class="menu-item" [class.menu-item--active]="dashboardLinkRef.isActive">
  <a routerLink="/dashboard" routerLinkActive #dashboardLinkRef="routerLinkActive">
    Dashboard
  </a>
</li>

<!-- Can be multiple refs to router links, that's not a problem ;) -->
<li class="menu-item" [class.menu-item--active]="loginLinkRef.isActive">
  <a routerLink="/login" routerLinkActive #loginLinkRef="routerLinkActive">
    Login
  </a>
</li>