title: angular RouterLinkActive not matching child paths
body: <p>I am relatively new to Angular and am trying to get a highlight to work on my NavBar. I have been through some other articles but they are not quite helping.</p>
  
  <p>In my <strong>app-routing.ts</strong> file</p>
  
  <pre><code>const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
   { path: 'dashboard', component: DashboardComponent },
   { path: 'guided-trades', component: GuidedTradeComponent },
   { path: 'guided-trade-detail/:id', component: GuidedTradeDetailComponent }, 
   { path: "**", redirectTo: '/dashboard'}
  ];
  </code></pre>
  
  <p>In my <strong>app.component.html</strong> file</p>
  
  <pre><code>&lt;ul class="navbar-nav"&gt;
    &lt;li class="nav-item"&gt;
      &lt;a id="positions" class="nav-link" routerLink="/positions" routerLinkActive="active"&gt;Positions&lt;/a&gt;
    &lt;/li&gt;         
    &lt;li class="nav-item"&gt;
      &lt;a id="guidedtrades" class="nav-link" routerLink="/guided-trades" routerLinkActive="navlinkactive"&gt;Guided Trades&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;  
  </code></pre>
  
  <p>in my <strong>guides-trade.component.ts</strong> file I have list which when a row is clicked navigates me to the detail record for that item (this works fine and I get to the correct page)</p>
  
  <pre><code>onRowClicked(row) {
    this.router.navigateByUrl('/guided-trade-detail/' + row.recID);
  }
  </code></pre>
  
  <p>in my <strong>styles.css</strong> file</p>
  
  <pre><code>.navlinkactive {
    border-bottom: 4px solid #007dba;
   }
  </code></pre>
  
  <p>When I click <em>Guides Trades</em> from the Nav Bar it highlights correctly. However, what I would like is that if I have navigated to the Guided Trade detail record the Guides Trades Nav Item is still highlighted. I have played around with trying children routes in the app-routing.ts file but I just can't get it to work.</p>
  
  <p>Would it just be easier to add something like [ngClass]="{'active': guidedtradedetail.isActive }" to the navlink in the <strong>app.component.html</strong> file?</p>