What is the use of a double-click event in AngularJS ? Last Updated : 05 Sep, 2022 Comments Improve Suggest changes Like Article Like Report The ng-dblclick event in the AngularJS is useful for the HTML elements for getting the double click event, defined. In case a user wishes to get the function fired or other events when the double click of the HTML elements is done, then this event will be going to be needed. All the elements of the HTML will be going to support it. Basically, the directive of ng-dblclick will be telling the AngularJS what exactly the HTML or the HTML elements need to do when it is double-clicked. However, it is not going to be overriding the original ondblclick event of the element, as both of them are going to be executed. Syntax: <element ng-dblclick="expression"> </element>Parameter: expression: It specifies the expression will be executed when a double-click is done on any element.Example 1: In this example, the number of counts gets increased every time a double-click is done on the header. HTML <!DOCTYPE html> <html> <head> <title> AngularJS ng-dblclick Directive </title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body style="text-align:center;" ng-app=""> <h1 style="color:green"> GeeksforGeeks </h1> <h2 style="color:purple"> ng-dblclick Directive </h2> <p>On the header given below, Double-Click on it.</p> <h1 style="color:#EA6964" ng-dblclick="count = count + 1" ng-init="count=0">Click </h1> <p>Double-Click has been done {{count}} times.</p> </body> </html> Output: Example 2: This example illustrates the ng-dblclick Directive in AngularJS to change the text color after clicking it doubled. HTML <!DOCTYPE html> <html> <head> <title>ng-dblclick Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <style type="text/css"> .green { color: green; } </style> </head> <body ng-app style="text-align:center"> <h1 style="color:green">GeeksforGeeks</h1> <h3>ng-dblclick Directive</h3> <div> <p ng-dblclick="col=!col" ng-class="{green:col}"> GeeksforGeeks is the computer science portal for geeks. </p> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article What is the use of a double-click event in AngularJS ? S SohomPramanick Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads What is the use of Bootstrap Datepicker in Angular? In this article, we will see the use of Bootstrap Datepicker in Angular. The Datepicker is used to make a component that will be shown by using a calendar and we can select the date from it. Adding Bootstrap to the Angular Project can make the better UI design, along with providing some in-built cla 3 min read What is the difference between $watch and $observe in AngularJS ? AngularJS provides different methods to observe/watch the changes in its elements and variables. The $observe and $watch are two different methods that serve this purpose. $observe is a method that is responsible to observe/watch the changes in the DOM attribute. We use $observe when we want to obse 3 min read What is the Lifecycle of an AngularJS Controller ? The Lifecycle defines the journey of the application, which it goes through, right from creation to destruction. The lifecycle of AngularJS determines how the data interacts with AngularJS. Understanding the lifecycle enables the developer to more efficiently develop applications with greater code r 6 min read How to show a span element for each rows clicked in AngularJS ? In this article, we will see how to display a span element for each row clicked in AngularJS. A span element is used to group in-line elements in a document. It can be used to make a hook to a particular part of the document which may be subject to a particular action based on DOM events. The span e 4 min read What are the Types of Linking Function in Angular ? When working with Angular directives, understanding the concept and types of linking functions is essential. Linking functions are a crucial part of the directive's lifecycle, allowing developers to interact with the directive's DOM element and scope. In this article, we will explore the different t 4 min read How to directly update a field by using ng-click in AngularJS ? In this article, we will see how to update the field directly with the help of the ng-click directive in AngularJS, along with understanding different ways to implement it through the implementations. Any field can be updated with ng-click using a custom JavaScript function. For this, we can make a 3 min read How to call an AngularJS Function inside HTML ? A Function is a set of statements that takes input, does some specific computation, and produces output. In this article, we will learn How to Call an AngularJS function inside HTML. To achieve this, we can use {{...}} to call the function from HTML. We can also pass arguments and return the result 3 min read How to call a function on click event in Angular2 ? A Function is a set of statements that takes input, does some specific computation, and produces output. An on click event occurs when the user clicks on an element. In this article, we will see How to call a function on click event in Angular2, along with understanding the basic implementation thro 3 min read What is the difference between ng-app and data-ng-app in AngularJS ? In web application development, AngularJS is one of the most favorite dynamic JavaScript frameworks that has HTML through script tags, enabling us to augment the HTML attributes using the directives and facilitating the data binding through the expressions.In this article, we will see the concepts o 5 min read What is the role of ng-app, ng-init and ng-model directives in AngularJS ? In this article, we will learn about the directives in AngularJS & explore the roles of various directives such as ng-app, ng-init & ng-model in angularJS. The AngularJS directive is a command that gives HTML documents new functionality. When we use the AngularJS directives, it will first fi 2 min read Like