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:
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?
NgChange 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.
- if the value returned from the $parsers transformation pipeline has not changed
- if the input continued to be invalid, since the model will stay null
- 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>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<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>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%20%0A%20%20angular.module('App1'%2C%20%5B%5D)%20%20%0A%20%20%20%20.controller('cng1l'%2C%20%5B'%24scope'%2C%20function(%24scope)%20%7B%20%20%0A%20%20%20%20%20%20%24scope.count%20%3D%200%3B%20%20%0A%20%20%20%20%20%20%24scope.myFunc%20%3D%20function()%20%7B%20%20%0A%20%20%20%20%20%20%20%20%24scope.count%2B%2B%3B%20%20%0A%20%20%20%20%20%20%7D%3B%20%20%0A%20%20%20%20%7D%5D)%3B%20%20%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<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.
Learn the latest trends and techniques in UI/UX design through UX Design Course.
A Flutter Certification Course will help you master the skills necessary to create outstanding mobile apps that users love.
Now that you know the Angular Directive, check out the Angular Certification Training course online 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.