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

Angular2: Uncaught (in promise): Error: Cannot match any routes: ” If you're specifying the routes on your project for the first time you may see the following error on the console when you run it: core.umd.js:3462 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: ''ErrorHandler.handleError @ core.umd.js:3462next @ core.umd.js:6924schedulerFn @...
Creating an Angular2 Datatable from Scratch PART 2: Filtering the Data Continuing from where we stopped at Part 1, today we're going to add the filter functionality to the table, but before we start let's do some styling. I'm going to use Bootstrap, but if you don't want you don't have to, feel free to style your component as you like. But if you decide to use Bootstra...
Tutorial: How to redirect in Angular2 In this tutorial I'm going to give you a very simple example of how to navigate between components on an Angular2 application, but before we begin there are some configurations we have to do. We're going to use 2 components in this example: Component1 and Component2, to be able to redirect and na...
Login Screen and Authentication with Angular2 Angular2 Login Screen Before we start I just want to say that in order to easily understand this tutorial you should already have some basic knowledge about Angular 2, it will involve routing, dependency injection and working with multiple components. I don't want to make this tutorial too long,...

12 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

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>