



The current work around is for us to manually add and remove touchmove or scroll listeners depending on our criteria. When they're not enabled at all, there's no need to still be listening in on every touchmove/scroll events. The other is for our pull-to-refresh and infinite scroll features, where users may or may not have them enabled. One example is when an input has focus, we want to know when the user begins to scroll it's parent, however, we don't need every input to listen to every scroll event. Additionally, there are many times we don't even need to listen in on touchmove events at all, unless a certain criteria happens. Far too many and often unnecessary change detections are happening. So the decorator above is simply saying: "When someone finishes pressing a key, execute the method below and pass the most recent DOM event into it."īut what's "the method below"? I'll cover that in the next section.There are cases where is the ideal API to use, however, for events like touchmove, mousemove or scroll we cannot use them for performance reasons. In the example above, the listener passes the well-known $event as the only parameter in the method. The second option in is an array of arguments that get passed to your custom method once the event occurs. That's useful when you need to know if a user clicked on a specific element on the UI. Remember: use a colon and not a period in that first option.Īnd even though the code above is listening for keyup on the document object, that's not all you can do with example: you can listen for click as well. Instead, you'll use verbiage and syntax similar to what you'd use if you were handling this with old-school JavaScript on an HTML page.Įxcept for that colon bit. So keep this in mind: the first option is structured in terms of the Document Object Model (DOM) and not typical Angular coding. In this case, it's listening for the keyup event on the document object. The first option is the event to listen for.

Your own method.īut before I demo that, let me explain the options associated with you'll see declared like this: ) That means it don't do nothin' by itself. In this guide, I'll show you how to write code that spies on your users. Why? Because you might need to take action based on a specific key that the user pressed. You have to "listen" to what your users are doing on the UI.
