AngularJS ng-click Event Function with Example

Here we will learn what is ng-click event directive in angularjs with example, how to call function in ng-click directive in angularjs, how to call ng-click function with parameters in angularjs.

AngularJS ng-click Event Directive

In angularjs ng-click directive event / function is used to define an angular click event for html elements. Suppose if you want to add and fire a click event on HTML button click that time we need to use this event. 

Syntax of AngularJS ng-click Event Directive

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

 

<element ng-click="expression">

...your code...

</element>

AngularJS ng-click Event Example

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

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs ng-click Event Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

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

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

$scope.clkcount = 0;

});

</script>

</head>

<body>

<div ng-app="ngclickApp" ng-controller="ngclickCtrl">

<h2>AngularJs ng-click Events Example</h2>

<input type="button" style="cursor:pointer" value="Click Here" ng-click ="clkcount=clkcount+1" /><br /><br />

<span style="color:Red">Number of Times you Clicked: {{clkcount}}</span>

</div>

</body>

</html>

If you observe above example we added ng-click event to button and getting button clicks count value in angularjs application.

Output of AngularJS ng-click Event Example

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

 

Angularjs ng-click event example output or result

AngularJS ng-click Event Function Example

In angularjs we can call function in ng-click event. Following is the syntax of calling function in angularjs ng-click event

 

<element ng-click="yourfunction()">

...your code...

</element>

Following is the example of calling function in angularjs ng-click event

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs ng-click Event Function Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

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

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

$scope.clkcount = 0;

$scope.getdetails = function () {

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

}

});

</script>

</head>

<body>

<div ng-app="ngclickApp" ng-controller="ngclickCtrl">

<h2>AngularJs ng-click Event Function Example</h2>

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

<span style="color:Red">Number of Times you Clicked: {{clkcount}}</span>

</div>

</body>

</html>

If you observe above code we are calling function “getdetails()” in button ng-click event in angularjs application.

Output of AngularJS ng-click Event Function Example

Following is the result of calling function in angularjs ng-click event.

 

Angularjs ng-click event function example output or result

AngularJS ng-click Event Function with Parameters Example

In angularjs we can call function with parameters in ng-click event. Following is the example of calling function with parameters in angularjs ng-click event

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs ng-click Event Function with Parameters Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

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

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

$scope.getdetails = function (msg) {

$scope.result = msg;

}

});

</script>

</head>

<body>

<div ng-app="ngclickApp" ng-controller="ngclickCtrl">

<h2>AngularJs ng-click Event Function Example</h2>

<input type="button" style="cursor:pointer" value="Click Here" ng-click ="getdetails('welcome to tutlane.com')" /><br /><br />

<span style="color:Red">{{result}}</span>

</div>

</body>

</html>

If you observe above example we are sending message as parameter to getdetails function and showing that parameter while clicking on button.  

Output of AngularJS ng-click Event Function Example

Following is the result of sending parameters to with functions in angularjs events example.

 

Angularjs ng-click event function with parameters example output or result