How to set the "active" Bootstrap navbar class in Angular 2?

Question

How can I set the class of the active "active" Bootstrap class in Angular 2? I found Angular 1 way .

When I go to the O page, add class="active" to O and remove class="active" to the Home .

 <ul class="nav navbar-nav"> <li class="active"><a [routerLink]="['Home']">Home</a></li> <li><a [routerLink]="['About']">About</a></li></li> </ul> 

thank

Answer 1

If you are using the new 3.0.0. ( https://github.com/angular/vladivostok ) you can use the routerLinkActive directive. No further javascript is required.

 <ul class="nav navbar-nav"> <li [routerLinkActive]="['active']"> <a [routerLink]="['one']">One</a></li> <li [routerLinkActive]="['active']"> <a [routerLink]="['second']">Second</a></li> </ul> 

I used "@ angular / router": "^ 3.0.0-alpha.7"

Answer 2

Bert Deterd's answer is correct, but there is one thing that can be added.

If one route is a substring of another route, you will see something like this: 2 active anchors

You can add this so that it matches only the exact routes:

 [routerLinkActiveOptions]="{exact:true}" 

Full example:

 <ul class="nav navbar-nav"> <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> <a [routerLink]="['/']">Home</a> </li> <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> <a [routerLink]="['/about']">About</a> </li> <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> <a [routerLink]="['/calendar']">Calendar</a> </li> </ul> 

Answer 3

Use isRouteActive with generate from the Router class.

According to the docs:

generate (linkParams: any []): Instruction

Create an instruction based on the routing line provided by DSL.

and

isRouteActive (instruction: instruction): boolean

Given an instruction, returns true if the instruction is currently active, otherwise false.

 <li [class.active]="router.isRouteActive(router.generate(['/Home']))"> <a [routerLink]="['/Home']">Home</a> </li> 

Answer 4

The following simple code works for the latest version of Angular2 RC4:

  <li [class.active]="router.url==='/about'"><a [routerLink]="['/about']">About</a></li> 

Using import {Router} from "@ angular / router"; and put the router in the constructor.

Answer 5

It does the trick (using RC5)

 <li [class.active]="homeLink.classList.contains('active')"> <a #homeLink routerLink="/home" routerLinkActive="active">Home</a> </li> 

Answer 6

On RC2, which did not work for me. I ended up using

  <li (click)="setActive('home')" class="{{getActive('home')}}"> <a [routerLink]="['/FullScreen']">Home</a></li> 

and in tracked code

  currentChoice: string = "home"; setActive(choice: string): void{ this.currentChoice = choice; } getActive(choice: string) : string{ if(this.currentChoice == choice) return "active"; else return "not"; } 

Answer 7

In "@ angular / router": "^ 3.3.1" the difference in the previous version is the bracket in routerLinkActive

 [routerLinkActive]="['active']" 

In the final version, ng2 will complain, so just remove the bracket

 routerLinkActive="active" 

Answer 8

Version "@ angular / router": "^ 3.3.1"

I just provide the name of the route that I declare in my app.route.ts

 import { ModuleWithProviders } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { DeclarationsComponent } from './declarations/declarations.component'; const appRoutes: Routes = [ { path: '', pathMatch: 'full', component: HomeComponent }, { path: 'declarations', pathMatch: 'full', component: DeclarationsComponent } ]; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

And in the view, I just write the name of the route

  <ul class="nav navbar-nav"> <li routerLinkActive="active"><a routerLink="">Home</a></li> <li><a routerLink="declarations">SAV</a></li> </ul> 

Answer 9

 <a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">Bob</a>