Host Listener & Host Bindings in Angular

Introduction:

In Angular, host listeners and host bindings are powerful features that enable you to interact with and manipulate the host element of a directive or component. In this blog post, we will explore host listeners and host bindings in Angular, explaining their concepts, demonstrating their usage, and providing practical examples to showcase their capabilities.

If you want to learn about a new feature of angular, you can refer here.

1. Understanding Host Listeners:

Host listeners allow you to listen to events on the host element and perform actions in response to those events. They are defined using the @HostListener decorator and are commonly used in directives or components to capture and handle user interactions.

2. Implementing Host Listeners:

To implement a host listener, follow these steps:

a. Import the HostListener decorator from @angular/core.

b. Decorate a method within the directive or component class using @HostListener.

c. Specify the event name as the decorator argument.

d. Implement the desired functionality within the method.

Let’s create an example where a custom directive, MyClickDirective, listens for a click event on the host element and performs a specific action.

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

@Directive({
  selector: '[myClick]'
})
export class MyClickDirective {
  @HostListener('click') onClick() {
    // Perform action on click
    console.log('Element clicked!');
  }
}

Now, apply the myClick directive to an element in your HTML template and the specified action will be triggered upon clicking that element.

<button myClick>Click Me</button>

3. Exploring Host Bindings:

Host bindings allow you to dynamically manipulate the properties of the host element. They are defined using the @HostBinding decorator and are useful for updating the host element’s attributes, classes, or styles based on certain conditions or changes.

4. Implementing Host Bindings:

To implement a host binding, follow these steps:

a. Import the HostBinding decorator from @angular/core.

b. Decorate a property within the directive or component class using @HostBinding.

c. Specify the property name or CSS attribute as the decorator argument.

d. Implement the logic to determine the value of the property.

Let’s create an example where a custom directive, MyHighlightDirective, dynamically adds or removes a CSS class to the host element based on a condition.

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

@Directive({
  selector: '[myHighlight]'
})
export class MyHighlightDirective {
  @Input() myHighlightColor: string;
  
  @HostBinding('class.highlighted') get isHighlighted() {
    return this.myHighlightColor === 'yellow';
  }
}

In the HTML template, apply the myHighlight directive to an element and provide the myHighlightColor input to conditionally add or remove the “highlighted” class.

<div [myHighlight]="color" [myHighlightColor]="'yellow'">Highlight me!</div>

5. Combining Host Listeners and Host Bindings:

Host listeners and host bindings can work together to create more interactive and dynamic behaviors in your directives or components.

For example, let’s modify our MyClickDirective to not only log a message but also change the host element’s background color on click using a host binding:

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

@Directive({
  selector: '[myClick]'
})
export class MyClickDirective {
  @HostBinding('style.background') background: string;

  @HostListener('click') onClick() {
    this.background = 'yellow';
    console.log('Element clicked!');
  }
}

Now, when you click the element with the myClick directive, it will change its background color to yellow.

<button myClick>Click Me</button>

Conclusion:

Host listeners and host bindings are powerful tools in Angular that allow you to interact with and manipulate the host element of a directive or component. By understanding their concepts and utilizing @HostListener and @HostBinding decorators, you can create more dynamic and interactive Angular applications. Experiment with different events, actions, and element properties to customize and enhance the behavior of your directives and components. Happy coding!

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.