Menu
I currently have a model which is the value of a search box. The search operation is performing perfectly but I also want yet another feature to be performed when the search text is modified. So i wanna add a listener or watch the model variable. How can I do it?
552
This means, for event binding, it is Angular that controls when a listener starts or stops listening to their target events. Later in the series, we will look at using Renderer2 and RxJS to dynamically add and remove event listeners only if and when specific conditions are met.
The ngOn directive adds an event listener to a DOM element via angular. element(). on(), and evaluates an expression when the event is fired.
$element is a jqlite (or jQuery if it is available) wrapped object containing a reference to some DOM objects as well as some helpful functions to interact with them. Any time you need to make changes to the DOM you would use $element .
In Angular 8, event binding is used to handle the events raised by the user actions like button click, mouse movement, keystrokes, etc. When the DOM event happens at an element(e.g. click, keydown, keyup), it calls the specified method in the particular component.
You've got 2 options to cover your use case:
Use the ng-change directive
You can write your input like so:
Search: <input ng-model="search.model" ng-change="changeHandler()"> where the changeHandler is a function defined on a scope.
Use a watch on a scope
by writing in your controller:
$scope.$watch('search.model', function(newVal, oldVal){ console.log("Search was changed to:"+newVal); $scope.search.watch = newVal; }); Here is a working plunk illustrating both: http://plnkr.co/edit/Jgb2slcBFzLNKK0JFNyo?p=preview
The difference between the 2 approaches is that ng-change will fire only as a result of user's iteractions with an input while $watch will fire for any model mutation - triggered from the input control or any other change to the model. So you can preciselly choose on which events you want to react.
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
