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:

javascript

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

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 :

javascript

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

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.

javascript

@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;
  }
}

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.