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?

Answer 1

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.