AngularJS (39 Blogs) Become a Certified Professional

What is Ng-change in Angular JS and how do assign value to it?

Published on Oct 22,2019 1.1K Views
3 / 4 Blog from Angular Basics

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

Hi, let’s learn about an interesting directive provided in AngularJS, i.e. ng-change directive, the name itself partially gives away the work that it performs. Programmers usually get confused between on-change and ng-change events, let’s clear out everything today in this blog. The topics we will take up today will be:

Before proceeding with the blog, we will first have a quick look at what Directives are in AngularJS.

What is a directive?

AngularJS directives are simply extended HTML attributes with a prefix ‘ng-‘. AngularJS provides a set of built-in directives which offer various functionalities to our applications. 

AngularJS also lets us define our own directives.

What is ng-change?

Ng-change is a directive in AngularJS which is meant for performing operations when a component value or event is changed. In other words, ng-change directive tells AngularJS what to do when the value of an HTML element changes.

An ng-model directive is required by the ng-change directive.

Important points while using ng-change directive:

  • What happens to onChange event? The ng-change directive from AngularJS does not override the element’s original onchange event, both the ng-change expression and the original onchange events will be executed.
  • The ng-change event gets triggered at every change in the value. It will not wait for all the changes to be made, or for the input field to lose focus.
  • The ng-change event is only triggered if there is an actual change in the input value, and not if the change was made from a JavaScript.
  • This ng-change directive is supported by the HTML tags like <input>, <select>, and <textarea>.
  • The ngChange expression is evaluated only when a change in the input value causes a new value to be committed to the model.

It will not be evaluated:

  1. if the value returned from the $parsers transformation pipeline has not changed
  2. if the input continued to be invalid, since the model will stay null
  3. if the model is changed not by an input value but programmatically.

Note, this directive requires ngModel to be present.

Syntax:

<element ng-change=“expression”></element>  

expression: It specifies an expression that is executed when value of an element changes.

Example:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body ng-app="App1">  
<div ng-controller="Cng1">  
  <p>Please type in the input field:</p>  
  <input type="text" ng-change="myFunc()" ng-model="Val" />  
  <p>The input field has changed {{count}} times.</p>  
</div>  
  
<script>  
  angular.module('App1', [])  
    .controller('cng1l', ['$scope', function($scope) {  
      $scope.count = 0;  
      $scope.myFunc = function() {  
        $scope.count++;  
      };  
    }]);  
</script>  
</body>  
</html>  

Output (After 3 changes)

Please type in the input field:

The input field has changed 3 times.

I hope, by now you might have got a clear understanding of the ng-change directive, try to use it in your programs and see how much you have learned. Thanks for reading. I would recommend you to go through this Angular Tutorial Edureka video playlist to watch videos and learn how to work with the Angular applications.

Now that you know the Angular Directive, check out the Angular training by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework which is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community driven indirectly driving better job opportunities. The Angular Certification Training aims at covering all these new concepts around Enterprise Application Development.

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.