How to set active tab style with AngularJS?

To set an active tab style using AngularJS we need to use isActive and the ng-controller method .

Method 1:

The ng-controller Directive in AngularJS is used to add 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 action.

Syntax:

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

Below example implements the above approach:



Let us look at this through a simple code. This is one of the simplest way to do it.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head> </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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
</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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.