Angular Directives Created: 16 Jan 2026 Updated: 16 Jan 2026

@HostListener in Angular

@HostListener allows you to listen to events occurring on that element. It acts as the "ears" of your directive, triggering functions when the user interacts with the host.

Here is a comprehensive list of the most probable events you will listen to using @HostListener.

1. Mouse Events

These are the most common triggers for attribute directives, used for hover effects, clicks, and drag-and-drop.

  1. Click & Double Click:
@HostListener('click') onClick() {
console.log('Element clicked!');
}

@HostListener('dblclick') onDoubleClick() {
alert('Element double-clicked!');
}
  1. Hover Effects:
@HostListener('mouseenter') onEnter() {
this.highlight = 'yellow'; // Usually combined with @HostBinding
}

@HostListener('mouseleave') onLeave() {
this.highlight = '';
}
  1. Right Click:
@HostListener('contextmenu', ['$event']) onRightClick(event: MouseEvent) {
event.preventDefault(); // Disables the default browser menu
}

2. Keyboard Events

Useful when your directive is attached to an input or a focusable element like a button. You can even filter for specific keys.

  1. General Keys:
@HostListener('keydown', ['$event']) handleKeyboardEvent(event: KeyboardEvent) {
console.log('Key pressed:', event.key);
}
  1. Specific Key Filters (Angular Special Syntax):
@HostListener('keydown.enter') onEnterKey() {
this.submitForm();
}

@HostListener('keydown.esc') onEscapeKey() {
this.closeModal();
}

3. Focus and Form Events

Crucial for directives that handle validation or UI feedback on input fields.

  1. Focus & Blur:
@HostListener('focus') onFocus() {
this.borderColor = 'blue';
}

@HostListener('blur') onBlur() {
this.borderColor = 'gray';
}
  1. Input Changes:
@HostListener('input', ['$event.target.value']) onInput(value: string) {
console.log('Current input value:', value);
}

4. Window and Document Events

Sometimes you need to listen for events that happen outside the specific element, like scrolling the page or resizing the window.

  1. Scrolling & Resizing:
@HostListener('window:scroll', []) onWindowScroll() {
console.log('User is scrolling the page');
}

@HostListener('window:resize', ['$event']) onResize(event: any) {
console.log('New width:', window.innerWidth);
}

Summary Table: Common Listeners

Event NameUse Case
'click'Triggering an action like a ripple effect or opening a menu.
'mouseenter' / 'mouseleave'Toggling hover styles or showing tooltips.
'keydown.enter'Submitting a text field when the user hits Enter.
'focus' / 'blur'Highlighting an input field when the user clicks inside.
'window:scroll'Creating a "sticky" header or "back to top" button.
'dragover' / 'drop'Handling file uploads or drag-and-drop UI logic.

Pro Tip: Using the $event object

If you need specific data from the event (like mouse coordinates or the specific key pressed), you must pass ['$event'] as the second argument.

@HostListener('mousemove', ['$event'])
onMouseMove(event: MouseEvent) {
console.log('X:', event.clientX, 'Y:', event.clientY);
}
Share this lesson:

Details

Category
Angular
Sub: Directives
View All Courses Back to Lessons

Navigation

Progress 22 / 22
Start 100% Complete
@HostBinding in Angular
Statistics
4 Lessons in Directives
4 SubCategories in Angular
22 Total Lessons in Angular