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

Question

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

When I go to About page, add class="active" to About, and remove class="active" on Home.

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

Thanks

Although it is not exactly what you are looking for, I believe that routerLink automatically sets the class to **router-link-active** when that link is active. So if its possible in your project, I would use the class .router-link-active in your css. — Gabu, Feb 16 '16 at 02:29

Bert Deterd · Accepted Answer · 2016-06-22T19:31:39.263

175

If you use the new 3.0.0. component router ( https://github.com/angular/vladivostok ) you can use the routerLinkActive directive. No further javascript 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"

edited Jun 22 '16 at 19:31

answered Jun 22 '16 at 19:15

Bert Deterd

1,784
1
10
6

1

Any counterpart in Dart? – Franklin Yu Dec 06 '16 at 05:45
still getting confused between `="active"` (wrong) and `="['active']"` (right). Thanks – superjos Dec 26 '16 at 14:56
1

@superjos probably for allowing multiple classes/values to be added if the current route is indeed in an active state – jarodsmk Jun 08 '17 at 09:23
1

Simple and perfect answer, Thanks Man – Hidayt Rahman Oct 11 '17 at 11:56
SUPER AWESOME ! – Mick Dec 15 '17 at 13:56
1

@superjos In addition to n15m0-jk's answer, you can add routerLinkActive="active" for only one class. – Hugo Passos May 30 '18 at 14:17
This is the perfect angularish 2 way... Thanks! – Sonhja Feb 20 '20 at 11:47
Thanks bro Simple and perfect answer <3 – Junaid khan Aug 27 '21 at 09:14

score 71 · Answer 2 · answered Aug 26 '16 at 16:55

71

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

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

You can add this to make it match exact routes only:

[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>

answered Aug 26 '16 at 16:55

Andrew Roth

1,063
10
18

1

I ran into this with the home route being just the app domain (empty string). It always showed as active. – Vic Nov 06 '16 at 03:33
I ran into an issue, whereby clicking outside the link (for example in the center of the web) made the li unactive. This was because I had the angular directives in the anchor tag instead of the a tag. In my head this has no difference, but it works in your way, mybae this comment helps somebody else. Thanks! – Mese Feb 16 '18 at 15:36
The perfect answer – Sushin Pv Jul 15 '18 at 17:52
3

Your [routerLinkActiveOptions]="{exact:true}" parameter really helps thanks. For those that are interested in what it does it to stops the active class from activating on the ['/'] Home page when the user is on a different page because it matches the path exactly as it is. – Ali Kazai Feb 01 '20 at 02:59
amazing! Thanks! – PhillipJacobs Sep 04 '20 at 08:32

score 10 · Answer 3 · answered Jul 27 '16 at 08:30

10

For the latest version of Angular2 RC4 the following simple code works:

      <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.

answered Jul 27 '16 at 08:30

Johannes

2,732
5
23
32

working fine for me (Y) . But i have a doubt that what i will do here incase of drop down menu.. example"

Deepak Pookkote

Jan 10 '18 at 11:54

score 6 · Answer 4 · edited Dec 15 '16 at 11:46

6

Use the isRouteActive with generate from the ~~Router~~ class.

According to docs:

generate(linkParams: any[]) : Instruction

Generate an Instruction based on the provided Route Link 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>

edited Dec 15 '16 at 11:46

Shabbir Dhangot

8,954
10
58
80

answered Feb 16 '16 at 02:39

Michael Kang

52,003
16
103
135

4

In angular2 rc1, this must be changed to something like this: `[class.active]="router.urlTree.contains(router.createUrlTree(['Home']))"`. Also, I'd like to point out that router must be injected into the component like this: `constructor(public router: Router)` – František Žiačik May 15 '16 at 11:31
1

To check for the root path `/`, I did `router.urlTree._root.children.length == 0`. Seems icky, but works. – Sam Barnum Jun 10 '16 at 20:23
Just a note here: if in your component your constructor looks like: constructor (private router:Router), all the above will work but you wont be able to build for production since router has private access. – jarodsmk Jun 08 '17 at 09:25

score 5 · Answer 5 · answered Aug 25 '16 at 13:12

5

This does the trick (using RC5)

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

answered Aug 25 '16 at 13:12

rcomblen

4,579
1
27
32

score 3 · Answer 6 · answered Jun 16 '16 at 15:49

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

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

and in the code behind tracked it

    currentChoice: string = "home";

   setActive(choice: string): void{
       this.currentChoice = choice;
   }

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

   }

score 2 · Answer 7 · answered Jan 31 '17 at 02:52

2

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

[routerLinkActive]="['active']"

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

routerLinkActive="active"

answered Jan 31 '17 at 02:52

brijmcq

3,354
2
17
34

score 1 · Answer 8 · edited Mar 29 '19 at 10:05

In the case of multiple links try this

<ul class="navbar-nav ml-auto"> 
<li class="nav-item " routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
<a class="nav-link" routerLink="">Home </a></li>
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link" routerLink="/aboutus">About</a></li>
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link" routerLink="/gallery">Gallery</a>
 </li>
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link" routerLink="/contactus">Contact Us</a>
</li>
</ul>

score 0 · Answer 9 · answered Jan 27 '17 at 16:26

The version "@angular/router": "^3.3.1"

I simply put 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>

score 0 · Answer 10 · answered Mar 17 '17 at 05:54

0

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

answered Mar 17 '17 at 05:54

Yathish

1
2

score 0 · Answer 11 · answered Feb 17 '18 at 06:02

import { Directive, HostListener, ElementRef, HostBinding, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appNavDropdown]'
})
export class NavDropdownDirective {
  isOpen:boolean =false;
  counter:number = 0;
  constructor(private el: ElementRef, private render: Renderer2) { }

  @HostBinding('class.open') get opened() {
    return this.isOpen;
  }

  @HostListener('click') onmouseClick()
  {
    this.counter++
    console.log();
    if(this.counter % 2 == 1)//odd
    {
      let part = this.render.parentNode(this.el.nativeElement);
      this.render.addClass(part,'open');
      this.isOpen = true;
    }else{
      let part = this.render.parentNode(this.el.nativeElement);
      this.render.removeClass(part,'open');
      this.isOpen = false;
    }
  }
  // @HostListener('mouseleave') onmouseLeave()
  // {
  //   let part = this.render.parentNode(this.el.nativeElement);
  //   this.render.removeClass(part,'open');
  //   this.isOpen = false;
  // }

  toggleClose() {
    // let part = this.render.parentNode(this.el.nativeElement)
    //this.menuclick = false;

  }
  toggle() {
    this.el.nativeElement.classList.toggle('open');
  }
}

/**
* Allows the dropdown to be toggled via click.
*/
@Directive({
  selector: '[appNavDropdownToggle]'
})
export class NavDropdownToggleDirective {
  constructor(private dropdown: NavDropdownDirective) { }

  @HostListener('click', ['$event'])
  toggleOpen($event: any) {
    console.log($event)
    $event.preventDefault();
  //  this.dropdown.toggleClose()
   this.dropdown.toggle();
  }
}

export const NAV_DROPDOWN_DIRECTIVES = [NavDropdownDirective, NavDropdownToggleDirective];

Please consider adding some explanation. – Sunil Feb 17 '18 at 06:39 — Sunil, Feb 17 '18 at 06:39

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

11 Answers11

Linked

Related