How to use @HostListener in Angular

How to use @HostListener in Angular

If you add @HostListener to your event handler, it will listen for events all the time.

The following listens for an event handler to be executed when clicked anywhere in the browser.


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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  // Write @HostListener on top of the event handler
  @HostListener( 'document:click', [ '$event' ] )
  public onTest(event: Event) {



By writing, an event handler will be executed when the user clicks anywhere in the browser.

On the HTML side, you do not need to write (click) at all.

Event Event handler operation details
@HostListener( ‘document:click’, [ ‘$event’ ] ) When clicking anywhere in the browser
@HostListener( ‘document:mouseover’, [ ‘$event’ ] ) On mouse-over in the browser
@HostListener( ‘window:resize’, [ ‘$event’ ] ) When the browser is resized


Discover more from 株式会社CONFRAGE ITソリューション事業部

Subscribe now to keep reading and get access to the full archive.

Continue reading

Copied title and URL