In an Angular component, I have the following code snippet that is functioning as intended:
@HostListener('document:click', ['$event'])
onClick(event) {
if(!this.eRef.nativeElement.contains(event.target)) {
console.log("clicked outside");
// code to close the component
}
}
However, I encountered a problem. My goal is to open the component when a user clicks on text and then close it when they click outside of the component. The issue arises because the text is located outside of the component, so clicking on it triggers the above method, causing the 'if' condition to be met and closing the component immediately.