ekhmoi
1
Hello!
Have any1 tried to catch click events outside component ?
So far i have tried to use this
-
Adding old way listener (to document, body, ion-app, window neither of them works)
constructor(public el: ElementRef, public renderer: Renderer) {
document.body.addEventListener('click', (event) => {
this.onClick(event, false);
});
}
-
Adding listener to host inside Component metadata
host: {
'(document:click)': 'onClick($event)',
}
-
Using Hostlistener
@HostListener('click') onClick(event, false) {
console.log(event);
}
But the result is always the same
Google chrome catches the clicks outside my component, but when i emulate or run in device, the event only fires up when i click on my component.
Is there a known issue or workaround ?
I do it this way in my project with no problems.
@ViewChild('special') special: ElementRef
@HostListener('document:click', ['$event'])
andClickEvent(event) {
if (!this.special.nativeElement.contains(event.target)) {
if (!this.navCtrl.isTransitioning() && this.navCtrl.getActive()) {
this.close()
}
}
}
I wrap the entire component in a span that is marked with #special
1 Like
ekhmoi
3
Hey!
Thanks for reply.
Do you have a repo example of this approach ?
Thanks in advance!
Sorry, don’t have a repo for it.
It’s just like I said and you wrap the entire page component with a tag like this
<span #special>
crg
5
I went through the same problem. Renderer2 did not work on native APPs.
This is the solution I’ve found : angular - How to detect outside clicks in ionic native APPs? - Stack Overflow