How to set active tab style with AngularJS ?

Last Updated : 08 Sep, 2022

In this article, we will see how to set an active tab style using AngularJS, & will also understand its implementation through the example. This task can be accomplished by implementing the isActive and the ng-controller method. We will perform this task with 2 different methods.

Method 1: The ng-controller Directive in AngularJS is used to add a controller to the application. It can be used to add methods, functions, and variables that can be called on some event like click, etc to perform certain actions.

Syntax:

<element ng-controller="expression">
    Contents... 
</element>

The below example implements the above approach.

Example 1: This example describes setting the active tab style using AngularJS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          How to set active tab style with AngularJS? 
      </title> 
</head> 
  
<body> 
    <div class="collapse navbar-collapse" 
         ng-controller="HeaderController"> 
        <ul class="nav navbar-nav"> 
            <li ng-class="{ active: isActive('/')}">  
                <a href="/">Geeks For Geeks</a>  
            </li> 
            <li ng-class="{ active: isActive('/html')}">  
                <a href="/html">HTML</a> 
            </li> 
            <li ng-class="{ active: isActive('/js')}">  
                <a href="/js">JAVASCRIPT</a>  
            </li> 
        </ul> 
    </div> 
    <div ng-view></div> 
    <script> 
        function HeaderController($scope, $location) { 
            $scope.isActive = function(viewLocation) { 
                return viewLocation === $location.path(); 
            }; 
        } 
    </script> 
</body> 
</html>

Output:

Method 2: Here we will use the modular function in Angular JS to create a module. A module is created by using the AngularJS function angular.module.

Syntax: for creating a module:

<div ng-app="myFirstApp">...</div>
<script>
var app = angular.module("myFirstApp", []);
 
//myFirstApp refers to HTML element in which application runs.
</script>

Syntax: for adding a directive to the module:

<div ng-app="myApp"></div>
<script>
var my_app = angular.module("myFirstApp", []);
my_app.directive("DirectiveApp", function() {
  return {
    template : "Hello Geeks!!!"
  };
});
</script>

Example 2: This is another example that describes setting the active tab style using AngularJS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>How to set active tab style with AngularJS?</title> 
</head> 
  
<body> 
    <div ng-app="link">  
        <a href="#Geeks For Geeks" active-link="active"> 
            Geeks For Geeks 
        </a>  
        <a href="#HTML" active-link="active">HTML</a> 
        <a href="#JAVASCRIPT" active-link="active">JAVASCRIPT</a>  
    </div> 
    <script> 
        angular.module('link', []).directive('Link',  
                    ['$location', function(location) { 
            return { 
                link: function(scope, element, attrs) { 
                    var active = attrs.activeLink; 
                    var path = attrs.href; 
                    path = path.substring(1); 
                    scope.location = location; 
                    scope.$watch('location.path()', function(newPath) { 
                        if(path === newPath) { 
                            element.addClass(active); 
                        } else { 
                            element.removeClass(active); 
                        } 
                    }); 
                } 
            }; 
        }]); 
    </script> 
</body> 
</html>