How to set active tab style with AngularJS?

19 Aug, 2020
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:
AngularJS-Misc
Picked
AngularJS
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Auth Guards in Angular 9/10/11
Routing in Angular 9/10
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
How to set focus on input field automatically on page load in AngularJS ?
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Hide or show elements in HTML using display property
How to append HTML code to a div using JavaScript ?