AngularJS ng-dblclick Event (Double Click) Example

Here we will learn what is ng-dblclick event in angularjs, use of ng-dblclick event in angularjs, how to raise event on double click of button in angularjs with example.

AngularJS ng-dblclick Event

In angularjs ng-dblclick event directive is used to define double click event for html elements. In case if you want to fire a function or other event on double click of HTML element then we need to use this event. 

Syntax of AngularJS ng-dblclick Event / Function

Following is the syntax of using ng-dblclick event in angularjs applications.


<element ng-dblclick="expression">

...your code...


AngularJS ng-dblclick Event Directive Example

Following is the example of using ng-dblclick event in angularjs applications.


Live Preview

<!DOCTYPE html>




AngularJs ng-dblclick Event Example


<script src=""></script>

<script type="text/javascript">

var app = angular.module('ngdblclickApp', []);

app.controller('ngdblclickCtrl', function ($scope) {

$scope.clkcount = 0;

$scope.getdetails = function () {

$scope.clkcount = $scope.clkcount + 1;






<div ng-app="ngdblclickApp" ng-controller="ngdblclickCtrl">

<h2>AngularJs ng-dblclick Event Directive Example</h2>

<input type="button" style="cursor:pointer" value="Double Click Here" ng-dblclick ="getdetails()" /><br /><br />

<span style="color:Red">No. of Times Event Called: {{clkcount}}</span>




If you observe above example we added ng-dblclick event to button and it will raise event only when we click double times in angularjs application.

Output of AngularJS ng-dblclick Event Example

Following is the result of using ng-dblclick event in angularjs applications.


Angularjs ng-dblclick Event Directive Example Result