Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

AngularJS | ng-dblclick Directive

  • Last Updated : 30 Mar, 2021

The ng-dblclick Directive in AngluarJS is used to apply custom behavior to when an element is clicked double. It can be used to show or hide some element or it can popup alert or to change the color of text when it is clicked twice.
Syntax: 
 

<element ng-dblclick="expression"> Content... </element>

Example 1: This example uses ng-dblclick Directive to display alert message after clicking the button doubled. 
 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>ng-dblclick Directive</title>
 
    <script src=
    </script>
</head>
  
<body ng-app="geek" style="text-align:center">
     
    <h1 style="color:green">GeeksforGeeks</h1>
     
    <h2>ng-dblclick Directive</h2>
     
    <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: 
Before double click: 
 

ngdblclick

After double click: 
 



ngdblclick

Example 2: This example changes the text color after clicking it doubled. 
 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>ng-dblclick Directive</title>
 
    <script src=
    </script>
     
    <style type="text/css">
        .green {
            color: green;
        }
    </style>
</head>
 
<body ng-app style="text-align:center">
     
    <h1 style="color:green">GeeksforGeeks</h1>
     
    <h2>ng-dblclick Directive</h2>
     
    <div>
        <p ng-dblclick="col=!col" ng-class="{green:col}">
            GeeksforGeeks is the computer science
            portal for geeks.
        </p>
 
    </div>
</body>
 
</html>

Output: 
Before double click: 
 

ngclick

After double click: 
 

ngclick

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!