Double Click Event in AngularJS

Introduction

This article explains double-click events in AngularJS. We have already explained mouse events using AngularJS in my previous article Mouse Events using AngularJS. Now in this article I am explaining the ng-dblclick directive of AngularJS.

ng-dblclick

This allows you to specify custom behaviour on a double-click event of the mouse on the web page. We can use it (ng-dblclick) as an attribute of the HTML element like:

<ANY_HTML_ELEMENT ng-dblclick="{expression}">

...

</ANY_HTML_ELEMENT>

Use the following procedure to create a sample of a double-click event using AngularJS.

Step 1: First of all you need to add an external Angular.js file to your application, for this you can go to the AngularJS official site or download my source code and then fetch it or click on this link and download it: ANGULARJS. After downloading the external file you need to add this file to the Head section of your application as in the following:

Step 2: Now I will show you how to use the ng-dblclick directive.

I am creating a TextBox and button and binding the TextBox using the ng-model directive and the button using the ng-dblclick directive. The code is as follows:

<body>

Name:

<input ng-model="name" type="text" />

<button ng-dblclick="Msg='Hello '+name">

Double Click

</button>

</br>

<h3>

{{Msg}}</h3>

</body>