How to detect click event outside Angular component ?

In angular, clicks are detected by different ways. As click is an event, thus inside a component it is detected by simple event binding. A simple click via event binding for detection within the component is given as follows:

filter_none

edit
close

play_arrow

link
brightness_4
code

@Component({
  selector: "geeks",
  template: `
<h1 (click)="clicked()">{{ some_text }}</h1>
  `
})
export class GeeksComponent {
  constructor() {}
  some_text = "Click Here";
  clicked() {
    this.some_text = "Event Triggered";
  }
}

chevron_right


To go on detection for click outside the component, @HostListener decorator is used in angular. It is a decorator that declares a DOM event to listen for and provides a link with a handler method to run whenever that event occurs.

Approach: Here the approach is to use @HostListener decorator. In angular, it is a decorator that helps in capturing any kind of event happening inside the DOM and gives the developer flexibility to perform any action based on that event. Here, on the simple click event, the handler will be referring the click event onto the component and for click on allover the DOM, it will capture using document:click.

The syntax for using HostListener is given as follows:

Syntax:



@HostListener(events, args)
handler_name(args){
  // Do something
}

There are three things to note in the syntax of HostListener:

  1. eventName: As the name suggests, this takes in the name of the event in the DOM, that needs to be listened.
  2. args: These are set of arguments to pass to the handler method when the event occurs. It takes input in list format.
  3. handlen_name: Here comes the method definition that will be called when event is triggered. It is called by the HostListener automatically.

Example: Bind with click within component For binding the click within the component, the eventName that will go inside the hostListener will be simply ‘click’. The above code in such a case will be written as :

filter_none

edit
close

play_arrow

link
brightness_4
code

@Component({
  selector: "geeks",
  template: `
    <h1>{{ some_text }}</h1>
  `
})
export class GeeksComponent {
  constructor() {}
  some_text = "Click Here";
  @HostListener("click")
  clicked() {
    this.some_text = "Event Triggered";
  }
}

chevron_right


Output:

Here there is no need to pass arguments for the handler to run. the HostListener takes ‘click’ as the event which triggered the method clicked.

Bind with click outside component
For detection of the click outside the component, another event is to be taken look at. Here the click will not work as it detects click within the component. Here the key will be looking for click within the DOM and not just the component, and thus ‘document:click’ will be the right choice for that and also at the same time we need to filter out the event within the component which is done by the Boolean variable ‘inside’. So in the code given as follows, there will be another component added to is which will act as outside context, but click on that will cause the click event on the current component.

filter_none

edit
close

play_arrow

link
brightness_4
code

@Component({
  selector: "another",
  template: `
    <div style="border-style: solid;margin:5px;">
      <h1>Outside Component</h1>
      <h2>Click here for outer component trigger</h2>
    </div>
    <geeks></geeks>
  `
})
export class AnotherComponent {
  constructor() {}
}
@Component({
  selector: "geeks",
  template: `
    <div style="border-style:solid;margin:5px;">
      <h1>Inner Component</h1>
      <h2>{{ some_text }}</h2>
    </div>
  `
})
export class GeeksComponent {
  constructor() {}
  some_text = "Click Here";
  inside = false;
  @HostListener("click")
  clicked() {
    this.inside = true;
  }
  @HostListener("document:click")
  clickedOut() {
    this.some_text = this.inside
      ? "Event Triggered"
      : "Event Triggered Outside Component";
    this.inside = false;
  }
}

chevron_right


Output:

In this example, if there is a click on the text ‘Outside Component’ then the text shown will be ‘Event Triggered Outside Component’. This shows how the click outside the component will be captured, within the GeeksComponent.




My Personal Notes arrow_drop_up

Im a final year MCA student at Panjab University, Chandigarh, one of the most prestigious university of India I am skilled in various aspects related to Web Development and AI I have worked as a freelancer at upwork and thus have knowledge on various aspects related to NLP, image processing and web

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : bunnyram19