ngChange And ngBlur Directives In AngularJS

Introduction

AngularJS provides many built-in directives. In this article we will discuss about ngChange and ngBlur directives.

ngChange

This directive allows us to define custom behavior on element change event. This directive has highest priority. Here changes are applied immediately while in the JavaScript “onchange” event which only triggers at the end of all change. The ngChange directive only access the value when changes made in input value and new value committed to the model. This directive required ngModel directive.

Syntax

< <input ng-change="expression" ng-model=”expression”>
...
</input >

Example

HTML

<h4>ngChange Example</h4>
<div ng-controller="HomeController">
    <input type="text" ng-change="change()" ng-model="textChange1" placeholder="Change event example">
    <br />
    <label>Change: {{textChange}} </label>
</div>

Controller

var app = angular.module("app", []);
app.controller("HomeController", function ($scope)
{
    $scope.textChange = "No"
    $scope.change = function ()
    {
        $scope.textChange = "Yes"
    }
});

Output



ngBlur

This directive allows us to define custom behavior on element blur event. This directive has highest priority.

Syntax

< <input, select, window, textarea, a ng-blur="expression">
...
</input, select, window, textarea, a >

Example

HTML

<h4>ngBlur Example</h4>
<div ng-controller="HomeController">
    <input ng-blur="blur()" placeholder="Blur event example">
</div>

Controller

var app = angular.module("app", []);
app.controller("HomeController", function ($scope)
{
    $scope.blur = function ()
    {
        alert('Perform blur event');
    }
});

Output



Summary

The ngChange and ngBlur are important directives to perform change and blur event in AngularJS. This article will help you to learn all of them.