How to detect if user clicked on that div?

Question

What i want is to check if user clicked anywhere in specific div. If not do something. I tried this:

handleClick(event){
        var clickedComponent = event.target;
        console.log(event.target,'adsadasdas');
        var inside = false;
        do {
            if (clickedComponent === this._eref.nativeElement) {
                inside = true;
            }
            clickedComponent = clickedComponent.parentNode;
        } while (clickedComponent);
        if(inside){
            console.log('inside');
        }else{
            console.log('outside');
        }
    }

Problem with this is that i have *ngIf on some elements so event.target is sometime false. So now i added a wrapper around and i want to check if user clicked inside that wrapper.

@Pac0 i cannot add event on whole page because that div is inside that whole page if i click will trigger always that event then — None, Oct 05 '17 at 12:35

Rahul Singh · Answer 1 · 2017-10-05T12:38:11.787

3

Look at this Directive credits to - https://christianliebel.com/2016/05/angular-2-a-simple-click-outside-directive/

import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    constructor(private _elementRef : ElementRef) {
    }

    @Output()
    public clickOutside = new EventEmitter();

    @HostListener('document:click', ['$event.target'])
    public onClick(targetElement) {
        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(null);
        }
    }
}

Also Look at this plunker

Update

import { Subscription } from 'rxjs/Subscription';

edited Oct 05 '17 at 12:38

answered Oct 05 '17 at 12:30

Rahul Singh

19,030
11
64
86

im getting an error for this directive: Type 'Subscription' is not assignable to type 'Observable'. Property '_isScalar' is missing in type 'Subscription'. – None Oct 05 '17 at 12:33
u need to add import for subscription with rxjs – Rahul Singh Oct 05 '17 at 12:36
i added this directive but i get false again even if i clicked on some component inside div – None Oct 05 '17 at 12:51
Please check the plunker too – Rahul Singh Oct 05 '17 at 12:54
yes but i have inside my wrapper multiple components with ngIf that are on some moment hidden and i get value true like it is clicked outside but it wasnt – None Oct 05 '17 at 12:55
regarding the plunker maybe you should update the type of globalClick which should be a Subscription according to this answer https://stackoverflow.com/questions/41264465/angular-2-typescript-ts2322-type-subscription-is-not-assignable-to-type-o – vzR Nov 27 '17 at 09:52

score 2 · Accepted Answer · answered Oct 05 '17 at 13:30

2

why you just use in the view the following?

<div *ngIf="cond" (click)="myEventHandler"></div>

and in the controler

myEventHandler(){
//do something
}

answered Oct 05 '17 at 13:30

Daniel Raouf

2,307
1
22
28

yes but what if i click outside that div ?? how to handle that if i click handler on that component – None Oct 05 '17 at 14:05
1

Click
Click
onClick(event) { var target = event.target || event.srcElement || event.currentTarget; var idAttr = target.attributes.id; var value = idAttr.nodeValue; if(value =="div1"){ //do something }else{ //do something } } – Daniel Raouf Oct 05 '17 at 14:14

How to detect if user clicked on that div?

2 Answers2