What is watcher and how to work with watcher in AngularJS
Posted By : Kaushlendra Kumar Pal | 27-Feb-2018
welcome to my new Angularjs blog in which I'll be looking at something called Angular Watch now angular watch is basically used to watch a variable and in Angular what happens is there's something called as a digest cycle so this digest cycle actually runs every time to check the update to any variable which is registered in angular. Unfortunately in angular you can't register every of the variable or ng-model so angular provides us an option called "watch".
Example : let's say we have a text box and I want to know how many times this text box has been modified now with angular we can do easily so we need to have a counter and a counter which will watch this input text box so let's say you updated text box counter times now this counter would be under our control in the controller of JS.
HTML
<body ng-app="mainApp" ng-controller="app">
<input type="text" ng-model="myText">
<br> You updated textbox: {{ counter }} times.
</body>
JS
app.controller('app', function($scope) {
$scope.counter = 0;
$scope.$watch('myText', function(newValue, oldValue) {
console.log("newValue : ",newValue);
//console.log("oldValue : ",oldValue);
});
});
Now what we want to do is we want to watch on myText so whenever myText is updated or hindered or whatever then what I want to do is I want to run a function and this function would be populated by angular by two arguments precisely the newValue and the oldValue Now check out the results in the browser:
Enter value in textBox : 12345
Output:
newValue: undefined
newValue: 1
newValue: 12
newValue: 123
newValue: 1234
newValue: 12345
Now let's check oldValue results :
JS
app.controller('app', function($scope) {
$scope.counter = 0;
$scope.$watch('myText', function(newValue, oldValue) {
// console.log("newValue : ",newValue);
console.log("oldValue : ",oldValue);
});
});
Enter value in textBox : 12345
Output:
oldValue: undefined
oldValue: undefined
oldValue: 1
oldValue: 12
oldValue: 123
oldValue: 1234
oldValue: 12345
Since we don't have any use with newValue and oldValue for this logic so I just want to do $scope.counter++ so what it does is whenever this is hindered or modified or edited then this counter would be updated so when I reload this it shows me 1 times because when this starts then the scope.watch runs the first time and this is the reason we got all new value as undefined in our first run so if I do like $scope.counter = -1; then this would fix our error so let's just update:
JS
app.controller('app', function($scope) {
$scope.counter = -1;
$scope.$watch('myText', function(newValue, oldValue) {
// console.log("newValue : ",newValue);
console.log("oldValue : ",oldValue);
});
});
Now, this is not a characters counter if you see that if you will remove the characters it's not decreasing the count value it's just telling us how many times this $scope.watch has been called.I hope you guys learned something useful about $scope.watch.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Kaushlendra Kumar Pal
Kaushlendra is an experienced Java Developer with comprehensive mastery of all Java packages. Able to Write well designed, testable, efficient code as per the requirements and handle different types of issues as well as functions.