Angular - @HostBinding and @HostListener

Today, let's explore two powerful decorators in Angular: @HostBinding and @HostListener.The HostBinding and HostListener are decorators in Angular. HostListener listens to host events, while HostBinding allows us to bind to a property of the host element.

These decorators allow us to enhance the behavior of a component by interacting with its host element. Let's understand how they work and how we can effectively use them.

HostElement

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

@HostBinding

The @HostBinding decorator enables us to bind a class property to a property of the host element. This way, we can dynamically modify the properties of the host element based on changes in our component's logic.

By utilizing this decorator, we can seamlessly update attributes, classes, or styles of the host element. Let's take a look at an example to illustrate the usage of @HostBinding:

import { Directive, HostBinding, OnInit } from '@angular/core';
@Directive({ selector: '[hostBindingExample]' })
export class HostBindingExampleDirective implements OnInit {
  @HostBinding('style.border') border: string = '';

  ngOnInit() {
    this.border = '5px solid green';
  }
}

In the above code snippet, hostBindingExample 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 hostBindingExample directive to a host element (p in the example) as shown below.

<p>App Component</p>
<p hostBindingExample>Host Binding Example Element!!</p>

@HostListener

This decorator enables us to listen to events on the host element of our component. It allows us to attach event listeners to the host element and execute custom logic when those events occur. Here's an example showcasing the usage of @HostListener:

import { Directive, HostBinding, HostListener } from '@angular/core';

@Directive({ selector: '[hostListenerExample]' })
export class HostListenerExampleDirective {
  @HostBinding('style.border') border: string = '';

  @HostListener('mouseover')
  onMouseOver() {
    this.border = '5px solid red';
  }
  @HostListener('mouseleave')
  onMouseLeave() {
    this.border = '';
  }
}

In the above code snippet, HostListener listens to the mouseover and mouseleave event. We use the HostListner decorator to decorate functions onMouseOver and onMouseLeave.

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

<p>App Component</p>
<p hostListenerExample>Host Binding Example Element!!</p>

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.

Both the @HostBinding and @HostListener decorators are powerful tools for manipulating and interacting with the host element of an Angular component. They provide a flexible way to extend the behavior and appearance of our components.

It's important to note that these decorators only function within the context of a component that has a view. They won't work in services or directive-only components. So, go ahead and leverage the capabilities of @HostBinding and @HostListener in your Angular projects. Enhance your components and create more interactive user experiences.

Happy coding! 😄