Event Handling in Angular: Exploring HostListener and HostBinding
Hello there!
I want to introduce you to 2 (almost) forgotten directives in Angular that are incredibly fascinating to learn. These directives hold the key to making your web pages more captivating and engaging
Introduction
In Angular, event handling plays a crucial role in creating interactive and dynamic applications. Two powerful decorators, HostListener and HostBinding, provide essential functionality to handle events and bind properties of the host element within a component or directive. In this article, we will dive into the technical aspects of HostListener and HostBinding, their usage, examples, differences, and suggestions for optimal usage.
HostListener
HostListener is a decorator in Angular that allows us to listen for events on the host element of a component or directive. It enables us to add an event handler to a DOM element and respond to events such as clicks, key changes, scrolls, and more. By binding a component method to a specific event, we can execute that method when the event is triggered.
Import/Usage
To import and use HostListener, follow these steps:
1- Import the necessary decorators from @angular/core:
import { Component, Directive, HostListener } from '@angular/core';2- Apply the HostListener decorator to the appropriate properties or methods within the component or directive.
Example 1:
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-example',
template: `<button (click)="onClick()">Click Here</button>`
})
export class ExampleComponent {
@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
console.log('Key pressed:', event.key);
}
onClick() {
console.log('Button clicked');
}
}In this example, we use HostListener to listen for the keydown event on the document and call the handleKeyboardEvent() method when the event is triggered. This handleKeyboardEvent() events will show you a message each time that you press any key.
We also use a regular click event on the button to call the onClick() method.
Example 2:
import { HostListener, Component } from "@angular/core";
@Component({
selector: 'app',
template: `<h1>Hello, you have pressed enter {{counter}} number of times!</h1> Press enter key
to increment the counter.
<button (click)="resetCounter()">Reset Counter</button>`
})
class AppComponent {
counter = 0;
@HostListener('window:keydown.enter', ['$event'])
handleKeyDown(event: KeyboardEvent) {
this.counter++;
}
@HostListener('window:keydown.Backspace', ['$event'])
handleBackspace(event: KeyboardEvent) {
this.counter--;
}
resetCounter() {
this.counter = 0;
}
}In this case, the example defines an Angular component that displays a counter and a button. The counter increments each time the enter key is pressed. Also, the counter decrements each time the BackSpace key is pressed, and it can be reset to zero by clicking the button.
The @HostListener decorator listens for the 'keydown.enter' event on the window and calls the handleKeyDown method whenever that event occurs. In the handleKeyDown method, the counter is incremented by one.
A similar idea ocurrs when HostListener decorator listens for the 'keydown.Backspace' event on the window. It calls the handleKeyDown method whenever ‘Backspace’ event occurs (the counter is decremented by one).
Finally, the resetCounter method assigns the value of zero to the counter variable.
HostBinding
HostBinding is another decorator in Angular that enables us to bind properties of a component or directive to properties of the host element. It is used to set property values on the host element based on the values of the component or directive properties.
Import/Usage
To import and use HostBinding, follow these steps:
1- Import the necessary decorators from @angular/core:
import { Component, Directive, HostBinding } from '@angular/core';2- Apply the HostBinding decorator to the appropriate properties within the component or directive.
Example 1
import { Component, HostBinding } from '@angular/core';
@Component({
selector: 'app-example',
template: `<div>Component Content</div>`,
styles: [`
:host {
display: block;
background-color: yellow;
}
`]
})
export class ExampleComponent {
@HostBinding('style.color') color = 'red';
@HostBinding('class.active') isActive = true;
}In this example, we use HostBinding to bind the style.color property of the host element with the color property of the component. We also bind the active class of the host element with the isActive property of the component. This allows us to set values on the host element based on the values of the component's properties.
Example 2
import { Component, HostBinding } from '@angular/core';
@Component({
selector: 'app-example',
template: `<div>Component Content</div>`,
styles: [`
:host {
display: block;
background-color: yellow;
}
`]
})
export class ExampleComponent {
@HostBinding('attr.role') role = 'button';
}In this example, we use HostBinding to bind the role attribute of the host element with the role property of the component. This allows us to dynamically set the role attribute on the host element.
Differences and usages
The main difference between HostListener and HostBinding is their functionality:
HostListeneris used to listen for specific events on the host element and execute component or directive methods in response. Examples of the events could be clicks, key changes, etc.HostBindingis used to bind component or directive properties to properties of the host element and set values on the host element based on these property values. Use it when you need to set values on properties of the host element based on the values of component or directive properties, such as styles, classes, etc.
Conclusion
In this article, we explored the powerful decorators HostListener and HostBinding in Angular. With HostListener, we can listen for events on the host element and execute methods accordingly. HostBinding allows us to bind component or directive properties to properties of the host element, enabling dynamic manipulation of the host element. By understanding the differences and best practices for using these decorators, you can enhance your Angular applications with interactive and responsive behavior.
Thanks for your attention!
