Introduction to AngularJs onclick
AngularJS ng-click is an In-Built AngularJS directive that is mainly used to handle the click events on the HTML view and processing the data in the controller as per requirements. The ng-click directive can be used with multiple HTML elements such as button, input, select, checkbox, etc. This provides the developer ability to define custom behavior whenever an element is clicked. In this topic, we are going to learn about AngularJs onclick.
Syntax
There are various HTML elements with which the ng-click directive is used
Using ng-click with input types
- Div/span
<div class=”some-cutsom-class” ng-click=”customExpression”></input>
- Img
<img class=”search-img” src=”src-path-to-image" ng-click=”customExpression”></input>
- Button
<button class="btn-class" aria-label="Cancel" type="button" ng-click=" customExpression">
- input
<input class=”btn-class” type=”button” ng-click=”customExpression”></input>
Using ng-click with textarea
<textarea ng-click=”customExpression”></textarea>
How does the ng-click directive work in AngularJS?
In the AngularJS framework, it is very important to know that all the In-Built directive which the AngularJS framework has provisioned will always be denoted with the ng prefix.
The ng-click directive functions are based on the event click, which means as soon as HTML view experiences a click (a mouse click) on a particular HTML element, then its corresponding ng-click expression is evaluated. The expression inside an ng-click directive can be a function call where function declaration is in the controller; expression can also be directly written in the HTML view and evaluated there itself. It is a good practice to write the complex logic inside a function defined in the controller and then invoke the HTML view function. The ng-click directive will keep a watch on the onclick event of the browser and gets triggered whenever the click is triggered. The ng-click directive is executed at priority level 0, and the Event object is available as $event.
Example
Below mentioned are an example of AngularJs onclick:
Index.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h3>Product Cart</h3>
<div ng-repeat="product in products" value="{{product}}">{{product}}
<button ng-click="addProduct()">Add</button>
<button ng-click="removeProduct()">Remove</button>
<hr><br>
</div>
<p>Total Products selected is = {{count}} </p>
<h3> Using image</h3>
<img ng-src="{{imgSrc}}" ng-style="imgSTyle" ng-click="displayDetails()"/>
{{imgDetails}}
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.addProduct = function() {
$scope.count++;
};
$scope.removeProduct = function() {
$scope.count--;
};
$scope.displayDetails = function() {
$scope.imgDetails = "Details of this image";
}
$scope.products = ["Milk","Butter","Bread","Juice","Fruits"];
$scope.imgSrc = "https://img.freepik.com/free-photo/high-view-cup-coffee-table_23-2148251697.jpg?size=626&ext=jpg";
$scope.imgSTyle = {
"heigth" : "80px",
"width" : "80px"
}
}]);
</script>
</body>
</html>
The above example shows different ways of using the ng-click directive in HTML view in an AngularJS application. We have taken various HTML elements to showcase the use of the ng-click directive in the HTML template. This directive is used with different input types such as button, checkbox, text, tel, email, etc., and is also used for displaying selected values from a dropdown and textarea.
<div ng-repeat="product in products" value="{{product}}">
This is an example of a list of products is iterated in HTML view using ng-repeat using the product in products.
<button ng-click="addProduct()">Add</button>
This is an example of using the ng-click directive with a button HTML element; whenever the button is clicked in HTML view, then addProduct function will get executed
<img ng-src="{{imgSrc}}" ng-style="imgSTyle" ng-click="displayDetails()"/>
This is an example of using ng-click directive in img tag whenever the image is clicked then display details function will get executed which is defined, controller
Output:
Output: 1 – Add and Remove Buttons in Product Cart
Output 2: total products count after adding 4 products and removing 1
Output 3: Using Image tag
Output 4: After clicking on the image
Conclusion – AngularJs onclick
ng-click is a directive in AngularJS that comes with a lot of importance in AngularJS application. This directive is used for handling the click event. Knowing where and when ng-click will get triggered is very important. There are various HTML tags with which this directive can be used.
Recommended Articles
This is a guide to AngularJs onclick. Here we discuss how the ng-click directive works in AngularJS and various HTML elements with which the ng-click directive is used. You may also look at the following articles to learn more –
