I’m using the following simple directive to detect the click outside div. Here is the code:
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) {
if (this._elementRef) {
const clickedInside = this._elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
this.clickOutside.emit(null);
}
}
}
}
It works well on web browser and iOS, but on android, it doesn’t work when clicking on ion-input or ion-area. I also tried to install crosswalk-webview, it made the situation worse, it didn’t work wherever you clicked.