ng-click in angularjs

Written By:- Isha Malhotra

what is ng-click

Ng-click directive provides the custom behaviour when an html element is clicked. When elements clicked, it will call the event handler function, which bind to ng-click.

ng-click example

In the following example, we perfume the sum of two numbers on button click event.


<!DOCTYPE html>
<html lang="en">
<head>
<script src="angular.js"></script>
<script>
var x=angular.module('abc',[]).controller('abc1',function($scope){
    $scope.add=function(n1,n2){
    $scope.data=parseInt(n1)+parseInt(n2);
    }
});
  </script>  
</head>
<body ng-app='abc'>
    <div data-ng-controller='abc1'>
        enter 1st value: <input type="text" data-ng-model='n1'><br>
        enter 2nd value: <input type="text" data-ng-model='n2'><br>
        <button data-ng-click='add(n1,n2)'></button>
    <div>
    <p>{{data}}</p>
    </div>    
</body>
</html>

It will show the following output:- 

		
		what is ng-click
		Figure 1

Similarly, we can also use ng-dblclick directives and it will perfume it but on double click.