ngClick And ngDblclick Directives In AngularJS

Introduction

AngularJS provides many built-in directives. In this article we will discuss about ngClick and ngDbclick directives.

ngClick

This directive allows us to define custom behavior on element click event. This directive has highest priority. In expression, event object is accessible as $event.

Syntax

<ANY ELEMENT ng-click="expression">
...
</ANY ELEMENT>

Example

HTML

<h4>ngClick Example</h4>
<div ng-controller="HomeController">
    <button ng-click="click()"> Click Here </button>
</div>

Controller

var app = angular.module("app", []);
app.controller("HomeController", function ($scope)
{
    $scope.click = function ()
    {
        alert('Perform click event');
    }
});

Output


ngDblclick

This directive allows us to define custom behavior on element double click event. This directive has highest priority. In expression, event object is accessible as $event.

Syntax

<ANY ELEMENT ng- dblclick ="expression">
...
</ANY ELEMENT>

Example

HTML

<h4>ngDblclick Example</h4>
<div ng-controller="HomeController">
    <button ng-dblclick="dblclick()"> Click Here </button>
</div>

Controller

var app = angular.module("app", []);
app.controller("HomeController", function ($scope)
{
    $scope.dblclick = function ()
    {
        alert('Perform double click event');
    }
});

Output



Summary

The ngClick and ngDblclick are important directives and to perform it double click and blur event in AngularJS. This article will help you to learn all of them.