Close elem on click outisde diretive angular 4
by Rajdeep Chandra
JavaScript
import { Directive, ElementRef, Output, EventEmitter, HostListener, HostBinding } from '@angular/core';
@Directive({
selector: '[appClickOutside]'
})
export class ClickOutsideDirective {
// @Output() clickOutside: EventEmitter<any> = new EventEmitter();
@HostBinding('class.open') isOpen: boolean;
constructor(private _elementRef: ElementRef) {
}
ngOnInit(): void {
this.isOpen = false;
}
@HostListener('document:click', ['$event.target'])
// for ios
@HostListener('document:touchstart', ['$event'])
public onClick(targetElement) {
const isClickedInside = this._elementRef.nativeElement.contains(targetElement);
if (!isClickedInside) {
console.log('click outside');
debugger;
this.isOpen = !this.isOpen;
// this.clickOutside.emit();
} else {
this.isOpen = false;
}
}
}