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 Tutorial: Creating Attribute Directives According to Angular2 documentation, directives are classes that can change the component behavior or/and appearance, which basically means they can add CSS classes and styles, register events and manipulate the component's properties. In this tutorial I'm going to show you how to create a very ...
Angular2 Error: Can’t bind to ‘ngModel’ since it isn’t a known property of &... Lots of people are having this problem since Angular2 introduced NgModule, this error occurs when you try to use something from an specific module without importing it, this is how the error looks on the console: zone.js:355 Unhandled Promise rejection: Template parse errors: Can't bind to 'ng...
Tutorial: Creating an Angular2 Autocomplete Angular 2 Autocomplete Before we begin I just want to say that I'm not going to use any third-party component for this tutorial, I'm going to create an autocomplete from scratch, my goal is to just make it show the suggestions and allow the user to select one, but if you need more advanced featu...
Creating a Live Auction App with Angular 2, Node.js and Socket.IO Angular 2 Auction App In this tutorial we're going to build a very cool Live Auction Application, my goal is to demonstrate how Angular 2, Node.js and Socket.io work together, and as everyone knows Angular 2 will soon come out so I thought it would be great to write a tutorial involving it. Of c...

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 to Hoang 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>