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: How to Pass Callback Functions to a Component There are lots of situations where it's useful to pass a function to an angular2 component, for instance, when our component is a dialog and we have to perform an specific task when it closes, or pass the action of one of its buttons, or even events like keypress, resize, mouseover, etc. If you're r...
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,...
Integrating an Angular2 app with a PHP app In this tutorial I'm going to show you how to use Angular2 Http client to communicate with an php application. I don't want this to be a very long post, so I'm going to make everything as simple as possible. The first step, of course, is to provide a php web service, it doesn't need to be anythin...
Angular2: How to Sort a JSON Dataset by Field To be able to sort an array we don't need anything specific from angular2, it can be accomplished just by using regular javascript, more specifically, we have to use the function sort() from the Array object, let's see an example: someArray.sort(function(a, b){ if ( a.someField < b.someFi...

11 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>