AngularJS ng-dblclick Directive Last Updated : 03 Aug, 2022 Comments Improve Suggest changes Like Article Like Report The ng-dblclick Directive in AngluarJS is used to apply custom behavior when an element is clicked double. It can be used to show or hide some element or it can popup an alert or change the color of text when it is clicked twice. This means that the element's original ondblclick event will not be overridden by this directive, both will be executed. Syntax: <element ng-dblclick="expression"> Content... </element>Example 1: This example uses the ng-dblclick Directive in AngularJS to display the alert message after clicking the button 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> </head> <body ng-app="geek" style="text-align:center"> <h1 style="color:green">GeeksforGeeks</h1> <h3>ng-dblclick Directive</h3> <div ng-controller="app"> <button> <a href="" ng-dblclick="alert()"> Click Here </a> </button> </div> <script> var app = angular.module("geek", []); app.controller('app', ['$scope', function ($app) { $app.alert = function () { alert("This is an example of ng-dblclick"); } }]); </script> </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 AngularJS ng-dblclick Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-click Directive The ng-click Directive in AngluarJS is used to apply custom behavior when an element is clicked. It can be used to show/hide some element or it can pop up an alert when the button is clicked. Syntax: <element ng-click="expression"> Contents... </element>Parameter Value: expression: It sp 2 min read AngularJS ng-checked Directive The ng-checked Directive in AngularJS is used to read the checked or unchecked state of the checkbox or radio button to true or false. If the expression inside the ng-checked attribute returns true then the checkbox/radio button will be checked otherwise it will be unchecked. Syntax: <input type= 2 min read AngularJS ng-app Directive The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. It can be used to load various modules in AngularJS applications. The ng-app directive declares only once in the HTML doc 1 min read AngularJS ng-change Directive The ng-change Directive in AngularJS is used whenever the value of an input element changes. The expression is evaluated immediately whenever there is a change in the input value. It requires an ng-model directive to be present. It is triggered whenever there is any single change in the input. It ca 2 min read AngularJS ng-if Directive The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it 2 min read Like