EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJs onclick
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

AngularJs onclick

AngularJs onclick

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

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

  1. Div/span

<div class=”some-cutsom-class” ng-click=”customExpression”></input>

  1. Img

<img class=”search-img” src=”src-path-to-image" ng-click=”customExpression”></input>

  1. Button

<button class="btn-class" aria-label="Cancel" type="button" ng-click=" customExpression">

  1. input

<input class=”btn-class” type=”button” ng-click=”customExpression”></input>

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,502 ratings)

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

AngularJs onclick output 1

Output 2: total products count after adding 4 products and removing 1

AngularJs onclick output 2

Output 3: Using Image tag

output 3

Output 4: After clicking on the image

output 4

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 –

  1. AngularJS ng-class
  2. AngularJS ng-disabled
  3. Angular 2 Directives
  4. AngularJS Filters
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more