AngularJS $rootElement service

Last Updated : 03 Feb, 2023

The AngularJS $rootElement service is a global service that provides a reference to the root element of the AngularJS application. This can be useful in a variety of scenarios, such as modifying the root element’s class name or attributes, or traversing the root element’s descendants.

Syntax: The syntax for using the AngularJS $rootElement service is as follows:

app.controller('myCtrl', function($scope, $rootElement) {
  // Use the $rootElement service here
});

Here, the $rootElement is injected into the controller as a dependency. Once injected, it can be used like any other JavaScript object.

The $rootElement service is a jQuery-lite element, which means it has a number of useful methods for manipulating the DOM, such as addClass, removeClass, attr, and find. The AngularJS $rootElement service does not take any arguments. It is simply a reference to the root element of the AngularJS application, which is typically the HTML element. Here are some of the most commonly used methods:

addClass(className): Adds the specified class to the element.
removeClass(className): Removes the specified class from the element.
attr(name, value): Gets or sets the value of the specified attribute.
find(selector): Finds all descendant elements that match the specified selector.
parent(): Gets the parent element of the element.
children(): Gets all child elements of the element.
next(): Gets the next sibling element of the element.
prev(): Gets the previous sibling element of the element.

Example 1: In this example, we have an AngularJS app with a single controller called mainCtrl. The mainCtrl controller has a scope function called getRootElementTagName which uses the $rootElement service to get the tag name of the root element of the AngularJS app (in this case, HTML). This function is called and the result is displayed on the page using AngularJS expression binding ({{ }}).

HTML

<!doctype html> 
<html ng-app="myApp"> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"> 
    </script> 
    <script> 
        var app = angular.module('myApp', []); 
        app.controller('mainCtrl', function ($scope, $rootElement) { 
            $scope.getRootElementTagName = function () { 
                return $rootElement[0].tagName; 
            }; 
        }); 
    </script> 
    <style> 
        h1 { 
            color: green 
        } 
    </style> 
</head> 
  
<body ng-controller="mainCtrl"> 
    <center> 
        <h1> GeeksforGeeks</h1> 
        <p> 
            The root element of this AngularJS  
            app is: {{ getRootElementTagName() }} 
        </p> 
    </center> 
</body> 
  
</html>

Output:

Example 2: In this example on checking the box the class gets added to the root element on unchecking the box the class gets removed.

HTML

<!doctype html> 
<html ng-app="myApp"> 
  
<head> 
    <style> 
        .my-class { 
            background-color: green; 
  
        } 
    </style> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"> 
    </script> 
    <script> 
        angular.module('myApp', []) 
            .controller('MyController', function ($rootElement) { 
                var vm = this; 
                vm.toggleClass = function () { 
                    if (vm.showClass) { 
                        $rootElement.addClass('my-class'); 
                    } else { 
                        $rootElement.removeClass('my-class'); 
                    } 
                } 
            }); 
    </script> 
</head> 
  
<body ng-controller="MyController as vm"> 
    <center> 
        <h1> GeeksforGeeks</h1> 
        <label> 
            <input type="checkbox" 
                   ng-model="vm.showClass" 
                   ng-change="vm.toggleClass()"> 
            Show Class 
        </label> 
    </center> 
</body> 
  
</html>