Sharing Top Content from the Angular-sphere.

AngularJs 2 Series: Host Event Binding With HostListener

  • The @HostListener decorator can be used to bind an event on the hosting element, in our case, the element hosting the highlight attribute.
  • In the article I will use the same Typescript class and show you how you can bind events to the host element.
  • The mouseenter event will trigger onMouseEnter() method which will change the background color to green and the mouseleave event will trigger onMouseExit() method which will restore back the color to yellow .
  • You can also be a guest writer for Web Code Geeks and hone your writing skills!
  • We enabled the highlight directive or attribute on the host element by binding the color to its style.background property.

In one of the previous article Binding The Host Element With @HostBinding, I showed you how to bind property to the host element using @HostBinding decorator. We enabled the highlight directive or attribute on the host element by binding the color to its style.background 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 @HostListener decorator or meta data.

@webcodegeeks: AngularJs 2 Series: Host Event Binding With HostListener – Angular.js

decorator.

decorator.

decorator.

method which will restore back the color to yellow.

Upon running the application, and hovering the mouse pointer over the text you should see the desired output.

AngularJs 2 Series: Host Event Binding With HostListener

Comments are closed, but trackbacks and pingbacks are open.