1

I am trying to implement routing in my project. I have implemented navigation tabs. I cant seem to solve this below problem. Whenever i click on other tabs, home tab is always active.

I have tried to add routerLinkActiveOption, which everywhere is the working solution. But its not just for me.

<ul class="nav nav-tabs">
   <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
      <a class="nav-link active" [routerLink]="['/']" data-toggle="tab" role="tab">Home</a></li>
   <li class="nav-item" routerLinkActive="active">
      <a class="nav-link " [routerLink]="['/users']"  data-toggle="tab" role="tab">Users</a></li>
   <li class="nav-item" routerLinkActive="active">
      <a class="nav-link " [routerLink]="['/servers']"  data-toggle="tab" role="tab">Servers</a></li>  
</ul>

Routes:

const routes: Routes = [
  {path : '' , component:HomeComponent},
  {path : 'users', component:UsersComponent},
  {path : 'servers', component:ServersComponent}
];

Screenshot tabs

thmspl
  • 2,437
  • 3
  • 22
  • 48
Maliha Khizer
  • 117
  • 1
  • 11

2 Answers2

0

Your first route should look like this

 {path : '' , component:HomeComponent, pathMatch: 'full'}

Take a look at this Link for explanation what pathMatch: 'full' exacly does.

maciejze
  • 177
  • 7
0

You need to use routerLinkActiveOptions

<li><a routerLinkActive="active" routerLink="product" [routerLinkActiveOptions]="{exact:true}">Shop</a></li>
Sourav Golui
  • 583
  • 1
  • 6
  • 13