How to set element as active when either of the sublink routes are active angular2

Question

I have the following code snippet for generating bootstrap nav-taps with an embedded dropdown list:

    <ul class="nav nav-tabs">
      <li class="pull-right">
        <a class="dropdown-toggle" data-toggle="dropdown"> More <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a [routerLink]="['/profile/settings']">Settings</a></li>
            <li><a [routerLink]="['/profile/billing']">Billing</a></li>
          </ul>
      </li>
      <li class="pull-right" [routerLinkActive]="['active']"><a [routerLink]="['/profile/feature1']">Feature1</a></li>
      <li class="pull-right" [routerLinkActive]="['active']"><a [routerLink]="['/profile/feature2']">Feature2</a></li>
    </ul>

This works fine for the normal tabs, but I can't figure out how to make the dropdown list active when either of the embedded links are active. I tried:

<a [routerLinkActive]="['active']" class="dropdown-toggle" data-toggle="dropdown"> More <span class="caret"></span></a>

but it doesn't seem to solve anything, anyone know how I can do this?

Answer 1

I'm dumb and attempted putting the [routerLinkActive] on the <a> element instead of <li>. Once I put it on the top most li it worked like a charm!

<ul class="nav nav-tabs">
  <li class="pull-right" [routerLinkActive]="['active']">
    <a class="dropdown-toggle" data-toggle="dropdown"> More <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a [routerLink]="['/profile/settings']">Settings</a></li>
        <li><a [routerLink]="['/profile/billing']">Billing</a></li>
      </ul>
  </li>
  <li class="pull-right" [routerLinkActive]="['active']"><a [routerLink]="['/profile/feature1']">Feature1</a></li>
  <li class="pull-right" [routerLinkActive]="['active']"><a [routerLink]="['/profile/feature2']">Feature2</a></li>
</ul>