AngularJS – angular.element() function


The angular.element() method wraps the raw DOM element or the HTML string as a jQuery element. If jQuery is available or imported, angular.element is an alias for the jQuery function, else this method delegates to AngularJS’s built-in subset of jQuery called jQueryLite or jqLite.

Syntax

angular.element(element)

Example − Wrapping the DOM element using angular.element()

Create a file "element.html" in your Angular project directory and copy-paste the following code snippet.

<!DOCTYPE html>
<html>
   <head>
      <title>angular.element()</title>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
   </head>

   <body ng-app="app" style="text-align: Center;">
      <h1 style="color: green;">
         Welcome to Tutorials Point
      </h1>
      <h2>
         AngularJS | angular.element()
      </h2>
      <div ng-controller="demo">
         <input type="text" id="text" ng-model="myVal" />
         <button ng-click="getVal()">
            Click me!
         </button>
         <br />
         <br />
         <b>You typed:</b> {{value}}
      </div>

      <!-- Script for passing the values and checking... -->
      <script>
         var app = angular.module("app", []);
         app.controller("demo", [
            "$scope",
            "$document",
            function ($scope, $document) {
               $scope.myVal = "";
               $scope.getVal = function () {
                  $scope.value = angular.element($document[0].querySelector("#text")).val();};
            },
         ]);
      </script> 
   </body>
</html>

Output

To run the above code, just go to your file and run it as a normal HTML file. You will see the following output on the browser window.

Example 2

Create a file "element.html" in your Angular project directory and copy-paste the following code snippet.

<!DOCTYPE html>
<html>
   <head>
      <title>angular.element()</title>

      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
   </head>

   <body ng-app="app" style="text-align: center;">
      <h1 style="color: green;">
         Welcome to Tutorials Point
      </h1>
      <h2>
         angular.element()
      </h2>

      <div ng-controller="geek">
         <div ng-mouseenter="style()" id="ide" ng-mouseleave="remove()">
            {{name}}
         </div>
      </div>

      <!-- Script for passing the values and checking... -->
      <script>
         var app = angular.module("app", []);
         app.controller("geek", [
            "$scope",
            "$document",
            function ($scope, $document) {
               $scope.name = "Tutorialspoint.com";

               $scope.style = function () {

angular.element($document[0].querySelector("#ide")).css({color: "white", "background-color": "black", "text-align": "center",});
               };
               $scope.remove = function () {

angular.element($document[0].querySelector("#ide")).css({color: "black", "background-color":"white",});
               };
            },
         ]);
      </script>
   </body>
</html>

Output

To run the above code, just go to your file and run it as a normal HTML file. You will see the following output on the browser window.

Updated on: 08-Oct-2021

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements