ng click variable assignment

Popular Articles

• Angularjs Ng-Click (Dec 02, 2023)
• Angularjs Ng-Show (Dec 02, 2023)
• Angularjs Ng-Change (Dec 02, 2023)
• Angularjs Hover (Dec 02, 2023)
• Angularjs Grid Example (Dec 02, 2023)

Angularjs Ng-Click

Switch to English

Table of Contents

Introduction

Understanding the ng-click directive, using the ng-click directive with functions, common errors and how to avoid them, tips and tricks.

• AngularJS, a powerful open-source JavaScript framework developed by Google, has been at the forefront of single-page application development since its inception. One of the many directives provided by AngularJS is the ng-click directive. This directive allows developers to specify custom behavior when an HTML element is clicked. In this article, we will delve into the ng-click directive, its uses, common errors and their solutions, and some tips and tricks for efficient usage.
• The ng-click directive in AngularJS allows us to add custom behavior to HTML elements when they are clicked. The behavior is specified in the form of an AngularJS expression, which is evaluated whenever the click event is triggered. Let's consider a simple example:
• In this example, whenever the button is clicked, the value of 'count' is incremented by one. This is the simplest form of the ng-click directive and demonstrates its basic functionality.
• While using the ng-click directive, we can also call functions defined in our AngularJS controller. This allows us to encapsulate and manage complicated logic away from the HTML.
• In the controller, we would define the incrementCount function as follows:
• In this example, whenever the button is clicked, the incrementCount function is called, which increments the value of 'count'.
• One common error when using ng-click is forgetting that the AngularJS expression needs to be enclosed in double quotes. Without the quotes, AngularJS will not be able to correctly interpret the expression.
• Another common error is not initializing the variable that is used in the ng-click directive. In our previous examples, if 'count' was not initialized in the controller before using it in the ng-click directive, we would encounter an error. To avoid this, always ensure that your variables are correctly initialized.
• While using the ng-click directive, it is important to remember that the AngularJS expression can include more than just simple assignments. We can use conditionals, perform arithmetic, and even call multiple functions.
• When using ng-click with functions, remember that you can pass parameters to the function. This can be especially useful when using ng-click within an ng-repeat directive.
• In this example, the incrementCount function would have access to the current item in the iteration, providing a powerful way to interact with individual items in a list.
• The ng-click directive is a powerful tool in AngularJS that allows developers to add custom behavior to HTML elements when they are clicked. By understanding how to use this directive effectively and avoiding common errors, developers can create dynamic and interactive web applications. Remember to initialize your variables, encapsulate complex logic in functions, and utilize the flexibility of AngularJS expressions to make the most of the ng-click directive.

Ricard Torres <dev>

Inline if/else statement ngClick AngularJS

♻️ Updated: November 27, 2022

I can't believe something this essential and easy was so hard to figure out with Angular. Googling like crazy I eventually came across this solution.

If you need to add a conditional statement if else inside the ng-click core directive, use the following structure:

Basically I wanted to assign a value to a variable on the ngClick event. It's fairly simple to use ternary operators to output strings or classes, it wasn't so obvious to assign variables.

Move logic to Controller / Directive

I hear you, all logic should be in a controller or directive . The view is not the place to be, I agree. However, sometimes you might need this 😉

Its working. Thanks a ton!

You’re welcome!

You’re welcome Alberto!

In some cases it is useful solution 👍

It’s so stupid … “all logic should be in controller…” … Angular gives you this holy bunch of ng-click, ng-show, ng-everything and everyone is using it. Doesn’t they notice that this is also logic inside the view?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

• Getting started with AngularJS
• Awesome Book
• Awesome Community
• Awesome Course
• Awesome Tutorial
• Awesome YouTube
• $http request
• Angular $scopes
• Angular MVC
• Angular Project - Directory Structure
• Angular promises with $q service
• AngularJS bindings options (`=`, `@`, `&` etc.)
• AngularJS gotchas and traps
• angularjs with data filter, pagination etc
• Built-in directives
• Angular expressions - Text vs. Number
• Built-In Directives Cheat Sheet
• ng-model-options
• ngMouseenter and ngMouseleave
• ngShow and ngHide
• Built-in helper Functions
• Controllers
• Controllers with ES6
• Custom Directives
• Custom filters
• Custom filters with ES6
• Dependency Injection
• digest loop walkthrough
• Directives using ngModelController
• Distinguishing Service vs Factory
• Form Validation
• Grunt tasks
• How data binding works
• HTTP Interceptor
• Lazy loading
• Migration to Angular 2+
• ng-class directive
• Performance Profiling
• Prepare for Production - Grunt
• Profiling and Performance
• Routing using ngRoute
• Session storage
• Sharing Data
• SignalR with AngularJs
• The Self Or This Variable In A Controller
• Use of in-built directives
• Using AngularJS with TypeScript

AngularJS Built-in directives ngClick

Fastest entity framework extensions.

The ng-click directive attaches a click event to a DOM element.

The ng-click directive allows you to specify custom behavior when an element of DOM is clicked.

It is useful when you want to attach click events on buttons and handle them at your controller.

This directive accepts an expression with the events object available as $event

When the button is clicked, an invocation of the onClick function will print "Hello click event" followed by the event object.

Got any AngularJS Question?

• Advertise with us
• Cookie Policy
• Privacy Policy

Get monthly updates about new articles, cheatsheets, and tricks.

Home to Angular and Other Interesting UI Technologies by a Practitioner

Saturday 2 July 2016

Ng-click in angular 2.

ng-click in angular 2 is different from angular js 1. Let us check how it is in angular js 1 first.

<div ng-click= "alertValue()" > Alert Value </div>

$scope.alertValue = function () { alert( 'clicked' ); }

In angular 2 it is different, see the below example for more info.

Angular is making use of powerful html and css properties. Here (click) syntax is already supported by html, angular 2 is making use of that features.

<div * ngIf= "selected" > <h4> Selected </h4> <p> <strong> {{selected.name}} </strong> </p> </div> <h2> {{title}} </h2> <div> <ul> <li * ngFor= "let i of items" > <p ( click )=" showSelected ( i )" > {{i.name}} </p> <p> {{i.exp}} </p> </li> </ul> </div>

Here you can notice the syntax different.

//Angular js 1 <div ng-click= "alertValue()" > Alert Value </div> //angular js 2 <p ( click )=" showSelected ( i )" > {{i.name}} </p>

Let us check the ts file. Here I have used angular 2 + typescript. On click I am showing the selected values.

import {Component} from 'angular2/core' @ Component({ selector : 'sample-list' , templateUrl : 'app/sample-list.html' , }) export class sampleComponent { title: string ; items: any []; selected: string ; constructor () { this .title = "Angular 2 click" ; this .items = [{ name : 'Prashobh' , exp : '9' , }, { name : 'Abraham' , exp : '15' , }, { name : 'George' , exp : '2' , }, { name : 'John' , exp : '20' , } ] } showSelected(item){ this .selected = item; } }

Click on the name you can see it is appearing in the top of header. Here I have added *ngIf="selected" ( ng-if in angular 2 )without this it will throw error as the value is not ready.

It will be nice if we add a simple search functionality for this name list. For that please refer this post Angular 2(+) search using pipe .

In this article we have discussed about adding a click event in Angular 2(+).

Related Post

1. How to start with Angular js 2

2. ng-repeat in angular js 2

3. Angular 2 filter using pipe concept

No comments :

Post a comment.

Angular 2 Series: Interactive Web Pages with ng-click and ng-if

Jilles Soeters

Following up on our series, we're going to dive into ng-click and ng-if next.

Creating the project

We're going to continue with the project from my previous post . I recommend you check that one out first so you get the basic idea of how a template works and know the code that is already there.

The Angular 1.x way

Just like in my previous example, I went ahead and created our desired application in Angular 1.2.

I appended a div to our application with the ngIf directive. It will only show the div if a ctrl.currentPerson is set. We set ctrl.currentPerson after clicking on a list item (with the ng-click directive). Now it's time to do this in Angular2.

The Angular2 way

First we need to create a function that sets currentPerson to the person clicked, we add this function in our component.ts file (previously repeater.ts).

No rocket science here, we set currentPerson to the person passed to our function and do nothing when we click the same person twice.

Time to edit our template! We change our template (previously repeater.html) from

You'll probably notice 2 strange things: the parenthesis and brackets.

• The parenthesis indicate that we're expecting an event . Instead of ng-click="fn()" and ng-mouseover="fn()" we simply use (click)="fn()" and (mouseover)="fn()" .
• The brackets indicate a property . Rather than ng-src="ctrl.value" and ng-style="{ 'width': ctrl.value }" we can now easily do [src]="value" and [width]="value" .

There is a third one for 2 way data-binding: [(model)] but we will cover that in a later post.

Personal opinion: This notation looks weird at first but makes much more sense after having used it for a bit. Don't let it scare you!

We're almost there. This code will unfortunately (but logically) throw an error. Why? Because currentPerson isn't set by default. And we can't access the img property of undefined.

To finish the function we have to wrap it in an *ngIf template so that it will never render whilst currentPerson is undefined.

If you remember my previous post you know that *ng-[directive] is just syntactic sugar. *ngIf is just that for:

We now have a cool Angular2 image clicking app that looks like this:

This was the second post into my "Angular 1.x built in directives in Angular 2.0" series. I hope you learned something! Stay tuned for my next post.

If you liked it don't hesitate to message me on Twitter @Jilles .

Follow @Jilles

• Learn Angular
• Learn Javascript
• Learn Bootstrap
• Learn jQuery
• Introduction
• Data Binding
• Directive, Modules and Controller
• Html and Template Binding
• Conditional Bindings
• Other Important Directives
• Ng-Show-Ng-Hide
• Ng-Bind-Template
• Ng-Pluralize
• Ng-Non-Bindable
• Ng-DoubleClick
• Ng-Keypress
• Ng-Mousedown
• Ng-Mouseenter
• Ng-Mouseleave
• Ng-Mousemove
• Ng-Mouseover
• Ng-Readonly
• Ng-Bind-Html
• Ng-Copy-Ng-Paste
• Ng-Model-Options
• Ng-Controller
• AngularJS $document
• AngularJS $filter
• AngularJS $log
• angular.bind
• angular bootstrap
• angular element
• angular copy
• angular equal
• angular extend
• angular.foreach
• angular isArray
• angular isDefined
• angular isDate
• angular-isFunction
• angular Custom directives

8 Example(s) of Ng-Click

We can display or hide the div element on the basis of value of isShow variable.

In this example ng-click directive call the showAlert() function which will show the alert "This is an example of ng-click".

In this example we can increase or decrease the value of count variable.In first button click we can decrease the value of count and on second button click we can increase the value of count because ng-click directive increase or decrease the value of count.

In this example we can increase the count1 and count2 variable on click of anchor element and button respectively. isCheck is a variable with ng-model directive which set the value of checkbox to isCheck variable.If isCheck is true it will not increase count2 because ng-disabled directive disable the button.

In this example ng-click will the changeColor() function which is used to change the color of div and color of color code in pre element if we click on the button.

In this example we can set and clear the value of textbox.Button having Set Value text will disable if textbox is empty.If we type in textbox then click on Set Value button it will display the value of textbox and button having Clear Value text will clear the value of textbox and set the text Learn It.

In this example we can create list of options with ng-options directive.Selected textbox value will bind to myName variable with ng-model directive.If we click on button it will call the executeFunction(myName) with selected value as parameter which display alert of selected value of textbox.

In this example of ng-click , we will use the animation to show and hide the div. Clicking on the button with text Slide Down will add the class slideDown which will basically show the div using animation and Slide Up button will hide the div. See the output:

AngularJS ng-click Directive

Increase the count variable by one, each time the button is clicked:

Definition and Usage

The ng-click directive tells AngularJS what to do when an HTML element is clicked.

Supported by all HTML elements.

Parameter Values

More examples.

Execute a function, in AngularJS, when a button is clicked:

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

This website requires JavaScript.

• {{navItem.extra.text}} {{navItem.name}}

• React Native
• CSS Frameworks
• JS Frameworks
• Web Development

AngularJS Basics

• AngularJS Tutorial
• Introduction to AngularJS
• Angular CLI | Angular Project Setup
• AngularJS Expressions
• AngularJS Modules
• AngularJS ng-model Directive
• AngularJS Data Binding
• AngularJS Controllers
• AngularJS | Scope
• AngularJS Services
• AngularJS | AJAX - $http
• AngularJS | Tables
• AngularJS Select Boxes
• AngularJS SQL
• AngularJS HTML DOM
• AngularJS Events
• AngularJS | Forms
• AngularJS Form Validation
• AngularJS | API
• AngularJS and W3.CSS
• AngularJS Includes
• AngularJS Animations
• AngularJS Routing
• AngularJS | Application
• AngularJS Directives
• AngularJS ng-app Directive
• AngularJS ng-bind Directive
• AngularJS ng-bind-html Directive
• AngularJS ng-bind-template Directive
• AngularJS ng-blur Directive
• AngularJS ng-change Directive
• AngularJS ng-checked Directive
• AngularJS ng-class Directive
• AngularJS ng-class-even Directive
• AngularJS ng-class-odd Directive
• AngularJS ng-click Directive
• AngularJS ng-cloak Directive
• AngularJS ng-controller Directive
• AngularJS Directives Complete Reference

AngularJS Filters

• AngularJS | Filters
• AngularJS currency Filter
• AngularJS | date Filter
• AngularJS filter Filter
• AngularJS json Filter
• AngularJS limitTo Filter
• AngularJS lowercase Filter
• AngularJS number Filter
• AngularJS orderBy Filter
• AngularJs uppercase Filter

AngularJS Converting Functions

• AngularJS angular.lowercase() Function
• AngularJS angular.uppercase() Function
• AngularJS angular.forEach() Function

AngularJS Comparing Functions

• AngularJS angular.isArray() Function
• AngularJS angular.isDate() Function
• AngularJS angular.isDefined() Function
• AngularJS angular.isElement() Function
• AngularJS angular.isFunction() Function
• AngularJS angular.isNumber() Function
• AngularJS angular.isObject() Function
• AngularJS | angular.isString() Function
• AngularJS angular.isUndefined() Function
• AngularJS angular.equals() Function
• AngularJS angular.toJson() Function

AngularJS Questions

• How to bundle an Angular app for production?

How to add many functions in one ng-click directive?

• How to directly update a field by using ng-click in AngularJS ?
• How to Add Dynamic Options for Multiple Selects Inside ng-repeat Directive ?
• How to detect when an @Input() value changes in Angular?
• How to open popup using Angular and Bootstrap ?
• How to reload or re-render the entire page using AngularJS?
• How to add input fields dynamically on button click in AngularJS ?
• How to Create Button Dynamically with Click Event in Angular ?
• How to use jQuery in Angular ?
• AngularJS Examples

The ng-click Directiv e in AngluarJS is used to apply custom behavior when an element is clicked. It can be used to show/hide some element or it can popup alert when the button is clicked. The ng-click directive is a very handy tool used in AngularJS. When an HTML is clicked, the ng-click directive tells the AngularJS script what to do. In this article, we will learn how to get many/multiple functions to the ng-click directive passed, in just one click.

The key is to add a semi-colon (;) or a comma (,). All the functions must be separated by a (;) or a (, ). This syntax is supported by all the elements in the HTML. It is basically an expression that when clicked, gets executed.

Example: This example shows how to add more than one functions in one ng-click.

Please Login to comment...

Similar reads.

• AngularJS-Misc
• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?