Angular Event Binding Deep Dive

Joe Eames | ng-conf | Joe Eames

One of the fist things we learn in angular is how to handle events. But many of us just learn how to do the basics, and never give it another thought. But understanding what’s really going on can come in handy in certain situations.

So let’s take a look under the hood of event bindings in Angular and see how that knowledge can help us out.

The basic syntax of event binding is pretty familiar to just about all Angular developers:

<button (click)="onClick()">Click Me</button>

This syntax listens to the click event on the button.

As you learned Angular you may have learned that the name of the events we listen to are the names of the underlying DOM events. So if we want to listen to the click event, then we bind to (click) and if we want to listen to mouseenter then we bind to (mouseenter).

But what not everyone may realize is that Angular is just doing an event listener basically the same way you would if you were using vanilla JavaScript.

element.addEventListener('click', () => { console.log('clicked') });

This isn’t just a mechanism where Angular has a list of events — click, mouseenter, etc — and if you type in one of those names then it’ll listen to the same event. Instead, you are giving Angular the name of an event you’d like to listen to.

Now not many people know that in the DOM, you can raise custom events on an element. So for example, you could have a config event on an element, and if you wanted to listen to that you could like so:

<element (config)="onConfig()" />

In this case, Angular will listen to that config event.

Now you may wonder why this matters.

Well, it can come into play if you are using some kind of 3rd party library, widget, or control that doesn’t natively support Angular, but does work by raising events on an element. So if you found the perfect date picker control, but it happens to be built in jQuery, no worries. You can listen to any events it raises through the above syntax.

<calender (dateselected)="onDateSelected()"></calendar>

It’s this level of understanding of how Angular works that can let us diagnose bugs, interop with other products, and do all kinds of useful things.

Happy Coding.

ng-conf: The Musical is coming

ng-conf: The Musical is a two-day conference from the ng-conf folks coming on April 22nd & 23rd, 2021. Check it out at ng-conf.org