Angularjs

AngularJS Events

AngularJS allows performing actions on HTML view elements i.e, attaching behaviors.We can categorize them into four categories as below:

  • Click events
  • Mouse events
  • Keyboard events
  • Change events
 
Click events

Adds custom behavior to the elements in view when the user performs click action on any element.

ng-click

Used to add custom behavior to the element when it is clicked.

Example:

index.html

<!DOCTYPE html>
<html>
<head><title>Ng-click event handler</title></head>
<body ng-app="myApp" ng-controller="myController">
<div style="text-align:center">
<input type=button ng-click="count=count+1" value="Increment Count" ng-model="count"/>
<p>Count: {{count}}</p>
</div>
</body>
</html>

 main.js

var app=angular.module("myApp",[]);
app.controller("myController",["$scope",function($scope){
$scope.count=0;
}]);

Try It!

Here whenever the user clicks on the button, count value will be incremented by 1.

 

ng-dblclick

Used to change the behavior of an element when user double clicks on the element.

Example:

index.html

<!DOCTYPE html>
<html>
<head><title>Ng-click event handler</title></head>
<body ng-app="myApp" ng-controller="myController">
<div style="text-align:center">
<input type=button ng-dblclick="count=count+1" value="Increment Count" ng-model="count"/>
<p ng-bind="count">count</p>
</div>
</body>
</html>

 main.js

var app=angular.module("myApp",[]);
app.controller("myController",["$scope",function($scope){
$scope.count=0;
}]);

Try It!

Mouse Events

These occur when changes are made on HTML view element using the mouse.It includes below event handlers:

ng-mouseup/ng-mousedown/ng-mousemove

Changes the behavior of an element when the mouse is clicked on an element or released or moved over an element.

Example:

index.html

<!DOCTYPE html>
<html>
<head><title>ng-mouse events handler</title></head>
<body ng-app="myApp" ng-controller="myController">
<div>
<div>
<input type=button ng-mousedown="mousedownEvent()" ng-mouseup="mouseupEvent()" ng-mousemove="mouseMoveEvent()" value="click to see mouse up and down events!" ng-model="eventName"/>
<p ng-bind="eventName" style="font-size:40px;color:green"></p>
</div>
<div>
<p>
Mouse move on number
</p>
<p ng-mousemove="count=count==9?count=0:count=count+1" 
style="font-size:180px;margin-top:-10px;color:red">{{moveEventName[count-0]}}
<p>
</div>
</div>
</body>
</html>

 main.js

var app=angular.module("myApp",[]);
app.controller("myController",["$scope",function($scope){
$scope.mousedownEvent= function(){
$scope.eventName = "Mouse Down Event Occured";
};
$scope.mouseupEvent= function(){
$scope.eventName = "Mouse Up Event Occured";
};

$scope.moveEventName = [1,2,3,4,5,6,7,8,9,10];

}]);

 Try It!

 

Key Events

These events occur when the user performs actions like the key press, key up and key down.

keydown/keyup/keypress

Triggers when the user clicks(press) on key. Keydown is triggered when the key is down and keyup is triggered when the key is up and the key press is a combination of keydown and keyup and triggered when the user enters a character it occurs in between keydown and keyup.  

Examples of keys that do not call keypress event are:

Shift,Alt,Ctrl,F1-F12,Arrow keys

Examples of keys that do not call keydown event are:

A-Z characters,Spacebar,Tab,Esc,Enter,Backspace

Example:

index.html

<!DOCTYPE html>
<html>
<head><title>Ng-key events handler</title></head>
<body ng-app="myApp" ng-controller="myController">
<div >
<input type=text ng-keydown="keydownEvent()" ng-keyup="keyupEvent()" ng-keypress="keypressEvent()" value="Type text" ng-model="eventName"/>
<p ng-bind="eventName"></p>
</div>
</body>
</body>
</html>

 main.js

var app=angular.module("myApp",[]);
app.controller("myController",["$scope",function($scope){
$scope.keydownEvent= function(){
$scope.eventName = "Key Down Event Occured";
};
$scope.keyupEvent= function(){
$scope.eventName = "Key Up Event Occured";
};
$scope.keypressEvent= function(){
$scope.eventName = "Key Press Event Occured";
};
}]);

 Try It!

Here if you press any character you will observe keyPress and keyUp events otherwise if you are pressing any arrow key you will observe keyDown and keyUp events.

Change Events

ng-change is the only event handler for change and can be bundled with ng-model to update the view on change of an element.

index.html

<!DOCTYPE html>
<html>
<head><title>Ng-change event handler</title></head>
<body ng-app="myApp" ng-controller="myController">
<div>
<input type=text ng-change="changeEvent()" ng-model="eventName" placeholder="Enter your text here"/>
<p ng-bind="eventName"></p>
</div>
</body>
</html>

 main.js

var app = angular.module("myApp",[]);
app.controller("myController",['$scope' ,function($scope){
$scope.changeEvent = function(){
$scope.eventName = "Change event occurred";
}
}]);

 Try It!

$event

Used to pass as an argument to the function with event handlers.This object is used to access the browser’s event object.

NOTE: ng-change event handler does not support the $event.

Leave a Reply

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