HostBinding And HostListener in Angular

@HostListener() Decorator

In Angular, the Decorator @HostListener () feature allows you to handle events from the host element of the directive class.

Let's take the following requirements:
On the click of the host item, you will see a warning window. To do this in the directive class, add @HostListener () and send the event 'click' to it. Also, associate a function to raise an alarm as shown in the following list:

@HostListener('click') onClick() {
    window.alert('Host Element Clicked');
}
In Angular, the Decorator (@HostListener) feature makes it easy to handle events that are raised in the host element of the directive class. Let's go back to our requirements and say that you only have to change the color to red when the mouse is floating and when it's gone, the color of the host element must change to black. To do this, you must handle mouse and mouseexit events in the host element of the directive class. To accomplish this, change the appChbgcolor directive class as shown below:

import { Directive, ElementRef, Renderer, HostListener } from '@angular/core';
@Directive({
    selector: '[appChbgcolor]'
})
export class ChangeBgColorDirective {
    constructor(private el: ElementRef, private renderer: Renderer) {
        // this.ChangeBgColor('red');
    }
    @HostListener('mouseover') onMouseOver() {
        this.ChangeBgColor('red');
    }
    @HostListener('click') onClick() {
        window.alert('Host Element Clicked');
    }
    @HostListener('mouseleave') onMouseLeave() {
        this.ChangeBgColor('black');
    }
    ChangeBgColor(color: string) {
        this.renderer.setElementStyle(this.el.nativeElement, 'color', color);
    }
}
In the directive class we handle mouse and mouse competition events. As you can see, we use @HostListener () to manage these host event events and assign a feature to it.

So let's use @HostListener () feature artist to handle events from the host element of the directive class.

@HostBinding() Decorator

In Angular, the Decorator (@HostBinding) feature allows you to set the host element's properties from the directive class.

Let's say you want to change the style properties such as height, width, color, margin, border, etc. Or other internal properties of the host element in the directive class. Here you will need the @HostBinding () decorator function to access these properties on the host element and assign a value to it in the directive class.

The @HostBinding () device takes a parameter, the name of the host element property, which value we want to assign to the directive.

In our example, our host element is an HTML div element. To set border properties for the host element, you can do this using @HostBinding () decorator as shown below:

@HostBinding('style.border') border: string;
@HostListener('mouseover') onMouseOver() {
    this.border = '5px solid green';
}
Using this code, the host element's boundary is set to a green solid 5 pixel width of a mouse pad. Therefore, using the @ HostBinding decorator, you can set the host element's properties in the directive class.