title: How to set element as active when either of the sublink routes are active angular2
body: <p>I have the following code snippet for generating bootstrap <code>nav-taps</code> with an embedded dropdown list:</p>
  
  <pre><code>    &lt;ul class="nav nav-tabs"&gt;
        &lt;li class="pull-right"&gt;
          &lt;a class="dropdown-toggle" data-toggle="dropdown"&gt; More &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a [routerLink]="['/profile/settings']"&gt;Settings&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a [routerLink]="['/profile/billing']"&gt;Billing&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="pull-right" [routerLinkActive]="['active']"&gt;&lt;a [routerLink]="['/profile/feature1']"&gt;Feature1&lt;/a&gt;&lt;/li&gt;
        &lt;li class="pull-right" [routerLinkActive]="['active']"&gt;&lt;a [routerLink]="['/profile/feature2']"&gt;Feature2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>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: </p>
  
  <pre><code>&lt;a [routerLinkActive]="['active']" class="dropdown-toggle" data-toggle="dropdown"&gt; More &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>but it doesn't seem to solve anything, anyone know how I can do this?</p>