Skip to content
Related Articles

Related Articles

Improve Article

How to set active tab style with AngularJS?

  • Last Updated : 19 Aug, 2020
Geek Week

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:




<!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>

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:




<!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>

Output:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :