@HostBinding And @HostListener In Angular

The Code Points June 21, 2022 0

In Angular, the decorators HostBinding and HostListener are used. HostListener is used to listen for host events, while HostBinding is used to bind to a host element property. The host is an element to which our component or directive is attached. When the user interacts with the host element, we can use this functionality to alter the host styles or conduct some action.

Host Element

The host element is the one to which our directive or component is attached. Keep in mind that components are directives with a purpose (template).

As an example,

Consider the ttToggle directive below. This directive was created in our Angular lesson custom directive. It's connected to a button element. The button element is the host element in this case.

<button ttToggle>Click To Toggle</button>

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

<div>
  <p apphighlight>
    <div>This text will be highlighted</div>
  </p>
</div>

HostBinding

Host Binding connects a Host element property to a directive or component variable.

HostBinding Example

The app that follows The HostBinding on style is used by the HighLight directive. the parent element's border property to the border property

Angular will update the border property of the host element if the border value is changed.

import { Directive, HostBinding, OnInit } from '@angular/core'
 
@Directive({
  selector: '[appHighLight]',
})
export class HighLightDirective implements OnInit {
 
  @HostBinding('style.border') border: string;
 
  ngOnInit() {
    this.border="5px solid blue"
  }
 
}

As seen below, the appHighLight directive is applied to a host element (in this case, p).

<div>
  <h2>appHighLight Directive</h2>
  <p appHighLight>
    This Text has blue Border
  </p>
</div>

HostListener

The HostListener Decorator monitors the host element's DOM events. It also includes a handler method that will be called when the event occurs.

HostListener Example

HostListener, for example, listens to the mouseover and mouseleave events in the following code. The HostListner decorator is used to decorate the onMouseOver and onMouseLeave methods.

import { Directive, HostBinding, OnInit, HostListener } from '@angular/core'
 
@Directive({
  selector: '[appHighLight]',
})
export class HighLightDirective implements OnInit {
 
  @HostBinding('style.border') border: string;
 
  ngOnInit() {
  }
 
  @HostListener('mouseover') 
  onMouseOver() {
    this.border = '5px solid green';
    console.log("Mouse over")
  }
 
  @HostListener('mouseleave') 
  onMouseLeave() {
    this.border = '';
    console.log("Mouse Leave")
  }
 
}

The directive is applied to a host element (in this case, p) as illustrated below.

The HostListener captures the mouseover event whenever the mouse is moved over the p element. It executes the onMouseOver method that we assigned to it. Using the HostBinding, this approach adds a green border to the p element.

The border is also deleted when the mouseleave event occurs.

<div>
  <h2>appHighLight Directive</h2>
  <p appHighLight>
    This Text has blue Border
  </p>
</div>

Attaching Classes using HostBinding

One of the most typical uses of the HostBinding decorator is to attach a class to the host element.

The highlight and box classes are added to the host element in the following example.

@HostBinding('class') class: string;

ngOnInit() {
  this.class="highlight box"
}

The getter technique can also be used.

@HostBinding('class')  get class() {  return "highlight box"  }

Another example

@HostBinding('class.highlight') get hasHighlight () { return true; } 
@HostBinding('class.box') get hasBox () { return false }

HostBinding & HostListner in Components

Directives with a template make up the components. As a result, we may use both HostBinding and HostListner in components.

A BoxComponent that applies the highlight and box classes to the host element is seen below. The component defines the class's highlight and box.

import { Component, HostBinding, HostListener } from '@angular/core';
 
@Component({
  selector: 'app-box',
  template: `
    <h2> This is Box Component</h2> `,
  styles: [
    `
    .highlight {
      color:green;
      display: block;
    } 
    
    .box {
      border: 1px dashed green;
    }
    `
  ],
 
 
})
export class BoxComponent {
  title = 'hostBinding';
 
  @HostBinding('class.highlight') get hasHighlight() { return true; }
  @HostBinding('class.box') get hasBox() { return true }
}

Now open app.component.ts and put the component mentioned before.

<app-box></app-box>

When you run the application, you will notice that there is no border around the text, and it is not highlighted. Because the host element is in the scope of the parent component (AppComponent) rather than the scope of the BoxComponent. As a result, all CSS styles in the BoxComponent will be ignored.

Add the styles to the app.component.css file. These styles are now correctly applied.

.highlight {
  color:blue;
  display: block;
} 
 
.box {
  border: 1px solid red;
} 

Conclusion

In this article, we covered what is HostBinding and HostListener and how to use them with examples.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.