Angular : Detect click event inside a div with ngFor inside

Question

I'm working on an Application with a lot of dropdowns, I would like to be able to close the dropdown whenever a click happens outside of this one.

I found some good solutions, but none of them handle the case of having a ngFor in it, when I log the click event target in the ngFor, I get the element but this one doesn't have any parent. I can not detect it with 'find' or 'contains' neither.

Does someone have a solution to detect if this target is part of the dropdown ?

the directive

import {
Directive,
ElementRef,
EventEmitter,
Input,
OnInit,
Output,
SimpleChange
} from '@angular/core';

@Directive({selector: '[clickOutside]'})
export class ClickOutside implements OnInit {
@Output() clickOutside:EventEmitter<Event> = new EventEmitter<Event>();

constructor(private _el:ElementRef) {
    this.onClickBody = this.onClickBody.bind(this);
}

ngOnInit() {
    document.body.addEventListener('click', this.onClickBody);
}

private onClickBody(e:Event) {
    if (!this.isClickInElement(e)) {
        this.clickOutside.emit(e);
    }
}

private isClickInElement(e:any):boolean {
    var current = e.target;
    do {
        console.log(current);
        if ( current === this._el.nativeElement ) {
            return( true );
        }
        current = current.parentNode;
    } while ( current );
    return false;
}
}

Example of where I call the directive

   <div (clickOutside)="onClickedOutside($event)">
            <ul>
                <li *ngFor="let item of itemsList" (click)="selectItem(item)">
                  <span class="item">
                    {{item.name}}
                  </span>
                </li>
            </ul>
        </div>

When I click on item.name, console.log(current); returns me two lines

<span>Item</span>


<li>
  <span>Item</span>
</li>

I don't get what the problem is. There is no virtual DOM in Angular2. — Günter Zöchbauer, Jul 04 '16 at 15:56
The problem is that I'm not able to tell if the click happened in this._el.nativeElement or not. Contains(), find(), and parentNode don't work when you click on an item of ngFor. — ThomasP1988, Jul 04 '16 at 16:06
My question is totally off topic, I was splicing my data, and wouldnt think that it would affect the click event — ThomasP1988, Jul 04 '16 at 16:32

score 2 · Accepted Answer · edited May 23 '17 at 10:31

2

@Directive({selector: '[clickOutside]'})
export class ClickOutside implements OnInit {
  @Output() clickOutside:EventEmitter<Event> = new EventEmitter<Event>();

  constructor(private _eref: ElementRef) { }

  @HostListener('window:click')
  private onClickBody(e:Event) {
    if (!this.isClickInElement(e)) {
        this.clickOutside.emit(e);
    }
  }

  private isClickInElement(e:any):boolean {
    return this._eref.nativeElement.contains(event.target);
  }
}

See also https://stackoverflow.com/a/35713421/217408

edited May 23 '17 at 10:31

Community

1
1

answered Jul 04 '16 at 14:47

Günter Zöchbauer

623,577
216
2,003
1,567

No, sorry but it doesnt work in my case, contains() doesnt detect everything i click in my ngFor – ThomasP1988 Jul 04 '16 at 14:58
I don't see an `ngFor` in your question. – Günter Zöchbauer Jul 04 '16 at 14:58
Does this mean you could make it work with `contains()`? – Günter Zöchbauer Jul 04 '16 at 16:35
I'm sorry, i was splicing the item after being clicked, I didn't think that the event Object was retro-active, so the element was out of the DOM. Thank you very much for your time, and sorry again – ThomasP1988 Jul 04 '16 at 16:36
1

Glad to hear you figured it out :) – Günter Zöchbauer Jul 04 '16 at 16:38

score 1 · Answer 2 · answered Jul 04 '16 at 16:04

1

This solution works with Chrome but unfortunately not with IE. I'm still looking for another way to do it

 private isClickInElement(e:any):boolean {
    var current = e.target;
    if(current == this._el.nativeElement) {
        return true;
    }
    for(let parentKey in e.path) {
        if(e.path[parentKey] == this._el.nativeElement) {
            return true;
        }
    }

    return false;
}

answered Jul 04 '16 at 16:04

ThomasP1988

4,597
3
30
36

How is this related to virtual DOM or `*ngFor`? What IE version? What does "works not with IE" mean exactly? – Günter Zöchbauer Jul 04 '16 at 16:06
for the virtual DOM i wasnt sure, thats why i put a question mark but thank you for the information. IE11, it seems that event.path is not available is every browsers. – ThomasP1988 Jul 04 '16 at 16:07
What about `contains()`? I don't see anything special that would prevent `contains()` to do what you want. – Günter Zöchbauer Jul 04 '16 at 16:09
It returns me false whenever I click on element of ngFor – ThomasP1988 Jul 04 '16 at 16:17
1

A Plunker would be helpful to investigate. I can't imagine `*ngFor` having such an effect. [Plunker template](https://angular.io/resources/live-examples/quickstart/ts/plnkr.html) – Günter Zöchbauer Jul 04 '16 at 16:21

Angular : Detect click event inside a div with ngFor inside

2 Answers2