Horje
How to get original element from ng-click in AngularJS ?

In AngularJS, we can get the original DOM element that fired the ng-click event using the event’s currentTarget property. Getting the event’s currentTarget can be useful when we want to track an element’s activity, in this case, whether and how many times a particular element is clicked, or we want to perform a certain operation if a particular element in the DOM gets clicked. In this article, we will see how to get the original element from ng-click in AngularJS.

There are 2 approaches to get the original element by implementing the ng-click Directive:

Table of Content

Implementing the currentTarget Property

In this approach, we will use the currentTarget property of an event to get the original element that triggered the click event from the ng-click directive. The following steps will be followed:

  • Create an AngularJS project using the CDN: Create an AngularJS project using the AngularJS CDN. You can name the app “my-app”.
  • Include the Angular CDN script and create a base layout: Include the Angular CDN script in the HTML file and add a div and button inside the body tag.
  • Add the AngularJS controller to the script: Create an AngularJS controller, and inside the controller, access the event’s currentTarget property to get the original element that triggered the ng-click event.

Example: This example illustrates the basic implementation to get the original element from the ng-click Directive.

HTML

<!DOCTYPE html>
<html>
  
<head>
     <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
     </script>
     <script>
          angular.module('myApp', []).controller(
                'gfgCtrl', function ($scope) {
               $scope.myFunction = function (event) {
                    const originalElement = event.currentTarget;
                    console.log('originalElement!', originalElement);
               };
          });
     </script>
</head>
  
<body style="text-align: center;">
     <div ng-app="myApp" 
          ng-controller="gfgCtrl">
          <div ng-click="myFunction($event)">
               <button>Click me</button>
          </div>
     </div>
</body>
  
</html>

Output: The output should log the original element that triggered the ng-click event to the console.

click-(1)

Implementing the target Property 

In this approach, we will use the target property of an event to get the element that triggered the click event. Here, we will create an <h1> and <p> element and on the click of the paragraph element, we will log the element to the console, as well as change its background color. Now, we will use the controller logic and modify it to use the target property of the event to get the target element on click of it and change the background color of the paragraph element.

Example: This example demonstrates getting the original element from ng-click by implementing the target Property.

HTML

<!DOCTYPE html>
<html>
  
<head>
     <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
     </script>
     <script>
          angular.module('myApp', []).controller(
                'gfgCtrl', function ($scope) {
               $scope.myFunction = function (event) {
                    const originalElement = event.target;
                    originalElement.style.backgroundColor = 'red';
  
                    console.log('originalElement!', originalElement);
               };
          });
     </script>
</head>
  
<body style="text-align: center;">
     <div ng-app="myApp" ng-controller="gfgCtrl">
          <div ng-click="myFunction($event)">
               <h1>GeeksforGeeks</h1>
               <p>
                   Click here to change the background
                   color of this paragraph
                </p>
          </div>
     </div>
</body>
  
</html>

Output:

color


 


Reffered: https://www.geeksforgeeks.org

AngularJS

Related
What is the Difference Between Promises and Observables in Angular ? What is the Difference Between Promises and Observables in Angular ?
What is the difference between Service Directive and Module in Angular ? What is the difference between Service Directive and Module in Angular ?
Difference between Double and Single Curly Brace in AngularJS ? Difference between Double and Single Curly Brace in AngularJS ?
How to use the $index inside a ng-repeat to enable a class and show a DIV in AngularJS ? How to use the $index inside a ng-repeat to enable a class and show a DIV in AngularJS ?
What is Angular Expression ? What is Angular Expression ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 14



 

Horje