Angular Routing routerLinkActive class not getting removed from base page even on other link routing

user_2685914 0
Viewed 1742

I am providing a simple routing example which works well. The only issue is that routerLinkActive is adding class 'baboossa' to whichever link is active. When I go from home to other links as 'about' or 'window' the link gets orange (due to baboossa class), but I can still see home also to be orange. Why now I am having 2 links with added classes from routerLinkActive and class is not getting removed from home?

app.component.html

<ul>
  <li><a [routerLink]="''" routerLinkActive="baboossa">Home</a></li>
  <li><a [routerLink]="'/about'" routerLinkActive="baboossa">About</a></li>
  <li><a [routerLink]="'/window'" routerLinkActive="baboossa">Window</a></li>
</ul>

<router-outlet></router-outlet>

app.module.ts

import { RouterModule } from '@angular/router';

imports: [
  RouterModule.forRoot([
    {path:'', component: HomeComponent},
    {path:'about', component: AboutComponent},
    {path:'window', component:WindowComponent}
  ])
]

styles.css

.baboossa {background:orange;}

Results:

enter image description here enter image description here enter image description here

Can someone point out the problem why I am getting 2 orange backgrounds on other active links than baseone (home)?

enter image description here

angular-routing angular javascript
6 Answers

You can archive with two methods:

  1. Add routerLinkActiveOptions [routerLinkActiveOptions]="{ exact: true }" with routerLinkActive.

Like this : [routerLink]="''" [routerLinkActive]="['baboossa']" [routerLinkActiveOptions]="{ exact: true }".

  1. Redirect your empty router path : '' to any particular path like '{ path : '', redirectTo: 'home'} in your router module.

Like this :

[{
    path: '',    
    pathMatch : 'full',
    redirectTo: 'home'
},
{
    path: 'home',    
    component: HomeComponent
}]

and change [routerLink]="''" with [routerLink]="'home'".

Here is the Stackblitz

user_83588920
user_103524390

Here's another way you can do it with a named path as default instead of empty. The RESTful API approach in which URL's are easy to understand. 

<ul>
  <li><a [routerLink]="[ 'home' ]" routerLinkActive="baboossa">Home</a></li>
  <li><a [routerLink]="[ 'about' ]" routerLinkActive="baboossa">About</a></li>
  <li><a [routerLink]="'[ 'window' ]" routerLinkActive="baboossa">Window</a></li>
</ul>

<router-outlet></router-outlet>

And then

import { RouterModule } from '@angular/router';

imports: [
  RouterModule.forRoot([
    {path:'home', component: HomeComponent},
    {path:'about', component: AboutComponent},
    {path:'window', component:WindowComponent}
    {path:'**', redirectTo: 'home'}
  ])
]
user_101975840

I have same problem. But i want to empty path when i was in home.

And i dont want to use [routerLinkActiveOptions]="{ exact: true }" because when i am in questions/:questionsId question menu in not active.

Like: abc.com

not: abc.com/home

const routes: Routes = [{ path: '', component: HomeComponent }, { path: 'questions/:questionsId', component: QuestionsComponent }, { path: 'questions', component: QuestionsComponent }];
user_49637650

I have used bootstrap for my nav bar and this code below worked perfect without changing the class. routerLinkActive="active" should do it.

  <ul class="nav nav-pills nav-fill">
    <li class="nav-item">
      <a class="nav-link" routerLinkActive="active" routerLink="/followers">Followers</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLinkActive="active" routerLink="/posts">Posts</a>
    </li>
  </ul>
</nav>```
user_171155450 
                           <ul>
                             <li>
                                <a
                                  [routerLinkActive]="'active'"
                                  [routerLinkActiveOptions]="{ exact: true}"
                                  routerLink="/">
                                  <p>All Students</p>
                                </a>
                              </li>

                              <li>
                                <a
                                  [routerLinkActive]="'active'
                                   [routerLink]="'/addstudent'">
                                  <p>Add New Student</p>
                                </a>
                              </li>
                            </ul>






const routes: Routes = [
  { path: 'addstudent', component: AddNewStudentComponent },
  { path: '', component: HomeComponent },

];
user_191529180
Related