How to set bootstrap navbar active class with Angular JS?

How to Set Bootstrap Navbar Active Class with Angular JS?

So you want to set the active class for each menu item in a Bootstrap navbar when the AngularJS route is active? No worries, I got you covered! 🙌

The Problem 🤔

When creating a navbar using Bootstrap in combination with AngularJS, setting the active class can be a bit tricky. You want the correct menu item to be highlighted when the user is on a specific page, based on the AngularJS route.

The Solution 💡

Here's a simple solution to set the active class for each menu item in your navbar:

1. Start by adding the ngRoute module to your AngularJS application. This module is responsible for handling routes and updating the active class.

2. In your HTML file, define your navbar structure using the Bootstrap classes. For example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Logo</a>
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="#/">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#/about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#/contact">Contact</a>
        </li>
    </ul>
</nav>

Note the use of the ng-href directive instead of the regular href attribute. This allows us to use AngularJS expressions in the href value.

1. In your AngularJS configuration, define the routes for your application using the $routeProvider. For example:

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'home.html',
            controller: 'HomeController'
        })
        .when('/about', {
            templateUrl: 'about.html',
            controller: 'AboutController'
        })
        .when('/contact', {
            templateUrl: 'contact.html',
            controller: 'ContactController'
        })
        .otherwise('/');
});

Make sure to include the appropriate controllers and templates for each route.

1. Next, create a custom AngularJS directive to handle the active class. This directive will add the "active" class to the menu item if the route matches. Add the following code to your JavaScript file:

app.directive('activeNav', function($location) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            scope.$on('$routeChangeSuccess', function() {
                var path = $location.path();
                angular.forEach(element.find('a'), function(link) {
                    var href = link.getAttribute('href');
                    if (path === href) {
                        angular.element(link).addClass('active');
                    } else {
                        angular.element(link).removeClass('active');
                    }
                });
            });
        }
    };
});

1. Finally, apply the active-nav directive to your navbar element. This will activate the directive and add/remove the "active" class based on the current route. Update your HTML code as follows:

<nav class="navbar navbar-expand-lg navbar-light bg-light" active-nav>
    <!-- Navbar content -->
</nav>

And that's it! Your Bootstrap navbar will now automatically update the active class based on the AngularJS route.

Conclusion 🎉

Setting the active class for each menu item in a Bootstrap navbar with AngularJS can initially seem challenging, but with a few simple steps, you can achieve the desired functionality. Just remember to include the ngRoute module, define your routes, create a custom directive, and apply it to your navbar. Your users will now have a visually satisfying and user-friendly experience while navigating your website. Happy coding! ✨

Was this guide helpful? Have you encountered any issues or challenges while setting the active class? Let me know in the comments below! And don't forget to share this post with your fellow developers to spread the knowledge. 👍