Using @HostBinding and @HostListener in Angular

Introduction

@HostBinding and @HostListener are decorators which are used while creating custom directives in Angular. These decorators can even be used with the component class as well. Both we need to import from @angular.core to use in our components.

@HostBinding

This decorator will help us set properties on the element or the component class. If it is used with a custom directive, the property will be applied to the host element. We can even set the property in a component using @HostBinding. 

@HostListener

This decorator will set the event binding or listen for events on the element or on the component class. If we use this decorator in a component class, then the host element will be our whole component itself. If we are binding a click event using @HostListener and if a user will click anywhere in the component, Angular will invoke the decorated method at that time. Whenever the specific event emits which are there in the @HostListener, we can perform a certain set of actions by writing a function. 
We can even do window resize event handling using @HostListener.

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    console.log("Window resized!")
  }

Now we will apply both the decorators on a component class

In this case, we are using @HostBinding with property background-color and we can even bind any class, property, attribute with this. We will apply the class pointer if the hostClass variable is true. 
import { Component, HostListener, HostBinding } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<div>My Project</div>`,
})
export class AppComponent  {
  @HostBinding('style.background-color') bgColor;
  @HostBinding('class.pointer') hostClass: boolean = true;
  @HostListener('click')
  onclick() {
    this.bgColor=  'red';
    this.hostClass = false;
  }
}

Use in Custom Directives

We can use both the decorators while creating a custom directive. Suppose we have a custom directive define as follows. This directive will add a comment to the host element. 

import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[ag1]'
})
export class ag1Directive implements OnInit {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
     const comment = this.renderer.createComment("Directive Renderer Example");
     this.renderer.appendChild(this.el.nativeElement, comment);
  }
}

Now we will add both the decorators in the above example. We will now add styling using @HostBinding and will attach an event mouseover and mouseleave using @HostListener decorator.

import { Directive, HostBinding, HostListener, Renderer2, ElementRef, OnInit,  } from '@angular/core';
@Directive({
  selector: '[ag1]'
})
export class ag1Directive implements OnInit {
  constructor(private renderer: Renderer2, private el: ElementRef) {}
  @HostBinding('style.color') color : string;
  @HostListener('mouseover')
   onmouseOver(){
    this.color = "red";
}  
  @HostListener('mouseleave')
   onmouseLeave(){
    this.color = "black";
}  
ngOnInit() {
     const comment = this.renderer.createComment("Directive Renderer Example");
     this.renderer.appendChild(this.el.nativeElement, comment);
  }
}

We will use the above directive as follows in HTML.

<div ag1>
<input type="text">
</div>

Comments