Sharing Top Content from the Angular-sphere.

AngularJs 2 Series: Host Event Binding With HostListener

  • We enabled the highlight directive or attribute on the host element by binding the color to its property.
  • We already saw how to render a yellow color to the element hosting this highlight directive using decorator.
  • The decorator can be used to bind an event on the hosting element, in our case, the element hosting the highlight attribute.
  • We have added decorator which accepts the name of the event to bind to the hosting element.
  • The decorator is prefixed to a property or method that will be invoked on the occurance of the specified event.

Rajeev is a senior Java architect and developer. He has been designing and developing business applications for various companies (both product and services). He is co-author of the book titled ‘Apache CXF Web Service Development’ and shares his technical knowledge through his blog platform techorgan.com

In one of the previous article Binding The Host Element With @HostBinding, I showed you how to bind property to the host element using decorator. We enabled the highlight directive or attribute on the host element by binding the color to its property. In this article I will use the same Typescript class and show you how you can bind events to the host element. We will use mouse related events (like on hover) to change the background color of the text container. We will use something called as decorator or meta data.

First let’s take a look at the existing code which demonstrates the use of decorator.

We already saw how to render a yellow color to the element hosting this highlight directive using decorator. Now we will change the color from yellow to green on mouse hover. This will be achieved using decorator.

The decorator can be used to bind an event on the hosting element, in our case, the element hosting the highlight attribute. The decorator is prefixed to a method which is invoked upon the occurrence of an event. Let’s look at the revised code that makes use of decorator.

The above code is pretty self explanatory. We are using the same directive class with the highlight attribute. We have added decorator which accepts the name of the event to bind to the hosting element. The…

AngularJs 2 Series: Host Event Binding With HostListener

Comments are closed, but trackbacks and pingbacks are open.