Bootstrap Navigation menu in Angular 2

Question

From Build a Navigation Menu with Bootstrap 4, I have created a top navigation menu:

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <div class="container">
        <a class="navbar-brand">Angular Router</a>
        <ul class="nav navbar-nav" routerLinkActive="active">
            <li class="nav-item"><a class="nav-link" routerLink="home">Home</a></li>
            <li class="nav-item"><a class="nav-link" routerLink="about">About</a></li>
            <li class="nav-item"><a class="nav-link" routerLink="courses">Courses</a></li>
        </ul>
    </div>
</nav>

<router-outlet></router-outlet>

The problem is, when I click on a menu item like home, it is not shown as active. I haven't included bootstrap.js.

Instead of bootstrap.js & jQuery, what is the best way I can make selected menu as active in Angular 2?

Stefan Svrkota · Accepted Answer · 2016-12-19 12:09:19Z

6

Simply use RouterLinkActive directive on all routerLink items:

<li class="nav-item"><a class="nav-link" routerLink="home" routerLinkActive="active">Home</a></li>
<li class="nav-item"><a class="nav-link" routerLink="about" routerLinkActive="active">About</a></li>
<li class="nav-item"><a class="nav-link" routerLink="courses" routerLinkActive="active">Courses</a></li>

active is bootstrap's class which will highlight currently active link. You can read more about RouterLinkActive directive here.

answered Dec 19, 2016 at 12:09

Stefan Svrkota

50.8k10 gold badges100 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jaks Over a year ago

Sorry. It is not working. When menu is clicked it gets gray background, but after clicking on any field like Text field, the menu is not highlighted anymore.

Stefan Svrkota Over a year ago

@jaks Well, something else is causing problem for you then, check out Angular's official example, that's how it is done: embed.plnkr.co/?show=preview (RouterLinkActive directive is used in app.component.ts)

jaks Over a year ago

Do I need to use ng-bootstrap? I have included only bootstrap css cdn.

Stefan Svrkota Over a year ago

@jaks Don't think that's the issue here. You can try to make your own css class which will change the background of your active tab and then assign that class to routerLinkActive to check if bootstrap is the problem here.

jaks Over a year ago

Thanks a million. I defined my own CSS class and it is working.

Collectives™ on Stack Overflow

Bootstrap Navigation menu in Angular 2

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related