1

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.

In my app-routing.ts file

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'}
];

In my app.component.html file

<ul class="navbar-nav">
  <li class="nav-item">
    <a id="positions" class="nav-link" routerLink="/positions" routerLinkActive="active">Positions</a>
  </li>         
  <li class="nav-item">
    <a id="guidedtrades" class="nav-link" routerLink="/guided-trades" routerLinkActive="navlinkactive">Guided Trades</a>
  </li>
</ul>

in my guides-trade.component.ts 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)

onRowClicked(row) {
  this.router.navigateByUrl('/guided-trade-detail/' + row.recID);
}

in my styles.css file

.navlinkactive {
  border-bottom: 4px solid #007dba;
 }

When I click Guides Trades 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.

Would it just be easier to add something like [ngClass]="{'active': guidedtradedetail.isActive }" to the navlink in the app.component.html file?

PC Frank
  • 21
  • 1
  • 7

1 Answers1

2

You need to set the routerLinkActiveOptions exact setting to false

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: false}">
user184994
  • 17,791
  • 1
  • 46
  • 52
  • Thanks I hadn't tried that. I think I had spent so much time on it the answer was staring me in the face. I ended up changing the entries in **app-routing.ts** to : { path: 'guided-trades', component: GuidedTradeComponent }, { path: 'guided-trades/:id', component: GuidedTradeDetailComponent }, and everything now works as I wanted – PC Frank Jul 30 '18 at 11:28
  • Glad to help. If this managed to solve your issue, would you mind marking is as solved using the green tick button? That way others with the same issue can find the solution. Thanks – user184994 Jul 30 '18 at 17:10