@HostBinding and @HostListener in Angular

The HostBinding & HostListener are decorators in Angular. HostListener listens to host events, while HostBinding allows us to bind to a property of the host element. The host is an element on which we attach our component or directive. This feature allows us to manipulate the host styles or take some action whenever the user performs some action on the host element.

Host Element

The host element is the element on which we attach our directive or component. Remember components are directives with a view (template).

For Example

Consider the following ttToggle directive. We built this directive in our tutorial custom directive in Angular. We attach it to a button element. Here the button element is the host element.

In the following example for the apphighlight directive, p element is the host element

HostBinding

Host Binding binds a Host element property to a variable in the directive or component

HostBinding Example

The following appHighLight directive, uses the HostBinding on style.border property of the parent element to the border property.

Whenever we change the value of the border, the angular will update the border property of the host element.

We apply appHighLight directive to a host element ( p in the example) as shown below.

HostListener

HostListener Decorator listens to the DOM event on the host element. It also provides a handler method to run when that event occurs.

HostListener Example

For example, in the following code HostListener listens to the mouseover & mouseleave event. We use the HostListner decorator to decorate functions onMouseOver & onMouseLeave.

We apply the directive on a host element ( p in the example) as shown below.

Whenever the mouse is moved over the p element, the mouseover event is captured by the HostListener. It runs the onMouseOver method which we have attached to it. This method adds a green border to the p element using the HostBinding.

Similarly, on mouseleave event, the border is removed.


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

Attaching Classes using HostBinding

Attaching a class to the host element is one of the common use cases of the HostBinding decorator.

For Example the following example adds the highlight & box class to the host element

You can also Use the getter method.

Another example

The Classes that HostBinding adds must exist in the scope of the host. i.e. both highlight & box must exist in the global styles or in the Component where we add the directive.

HostBinding & HostListner in Components

The components are nothing but directives with a template. Hence we can make use of both HostBinding & HostListner in components also.

The following is a BoxComponent, which applies the highlight & box classes to the host element. The classes highlight & box are defined in the component.

Now, open the app.component.ts and insert the above component.

Run the app and you will not see any border neither the text is highlighted. i.e. because the host element exists in the parent components (AppComponent) scope and not in the BoxComponent scope. So any CSS styles in the BoxComponent will have no effect

Open the app.component.css and add the styles. These styles are now applied correctly.

References

  1. HostBinding API
  2. HostListner API

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top