Angular2 Tutorial: Detecting Clicks Outside the Component

Angular2 click detection
Angular2 click detection

Sometimes there is a need to detect whether the user is clicking inside or outside our angular2 component, specially if your component has a dropdown element, in this case you need to know exactly where the click occurred in order to perform the right action. In this tutorial I’m going to demonstrate with angular 2 a very easy way to determine if the click happened outside the component or not.

Let’s start by creating this very simple component:

import {Component, ElementRef} from 'angular2/core';
 
@Component({
    selector: 'click-detection-component',
    template: `
    	<div style="width:100px;height:60px;background-color:#f1f1f1"></div>
    	`
})
 
export class ClickDetectionComponent {
}

Nothing special here, it just renders a rectangle on the screen. Now my goal will be to show a different message when the click occurs inside and outside this rectangle, to do that we have to create a function to check if the clicked component belongs to my current angular2 component or not:

export class ClickDetectionComponent {
   public elementRef;
 
   constructor(myElement: ElementRef) {
       this.elementRef = myElement;
   }
 
   handleClick(event){
       var clickedComponent = event.target;
       var inside = false;
       do {
           if (clickedComponent === this.elementRef.nativeElement) {
               inside = true;
           }
           clickedComponent = clickedComponent.parentNode;
       } while (clickedComponent);
       if(inside){
           console.log('inside');
       }else{
           console.log('outside');
       }
   }
}

Here’s what is happening in this function: First I’m getting the clicked component from my event using event.target, then I’m navigating between its parent nodes checking is one of them is my elementRef.nativeElement, if it is, it means that the user clicked inside the component, otherwise it was outside.

Now comes the tricky part, if I bind this function to the div click event it will only be called when the user clicks on the div, therefore how am I going to be able to detect the clicks that occurs outside? To solve that I’m going to use the (document:click) event, this way the function will be called no matter where the user clicks.

You can add this event to your component like this:

@Component({
    selector: 'click-detection-component',
    host: {
        '(document:click)': 'handleClick($event)',
    },
    template: `
    	<div style="width:100px;height:60px;background-color:#f1f1f1"></div>
    	`
})

Perfect! Now if you run your project you can see the messages on the console telling whether the component was clicked or not.

Hope you enjoyed the tutorial, just leave a comment if you have any doubts.

Recommended for you

9 comments on “Angular2 Tutorial: Detecting Clicks Outside the Component

  1. rahul

    Hi,
    It is working for me thanks, but i want to do the selection on the keydown but it is not working for me . Please let me know how I can do that

  2. Björn Bergqvist

    Thought i might share a version of this as a Directive and functions that will trigger on inside/outside click.

    import { Directive, ElementRef, Input } from '@angular/core';
     
    @Directive({
        selector: '[click-detection]',
        host: {
            '(document:click)': 'handleClick($event)',
        }
    })
    export class ClickDetectionDirective {
     
        @Input('inside') public funcInside: Function;
        @Input('outside') public funcOutside: Function;
     
        constructor (
            private _elementRef: ElementRef
        ) {
        }
     
       handleClick(event: any) {
           let clickedComponent = event.target;
           let inside = false;
           do {
               if (clickedComponent === this._elementRef.nativeElement) {
                   inside = true;
                   break;
               }
               clickedComponent = clickedComponent.parentNode;
           } while (clickedComponent);
     
           if (inside &amp;&amp; this.funcInside) {
               this.funcInside();
           }else if (this.funcOutside){
               this.funcOutside();
           }
       }
    }

Leave a Reply to facundo Cancel reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>