Achieving a desired effect using Angular 2, I have implemented a component with a small popup <div>. The popup is dismissed when the user clicks anywhere on the document except for the popup itself. To achieve this functionality, I utilize HostListener.
While this implementation works properly when there are no interior elements within the popup, it fails to behave as desired if there are any interior elements present. In other words, clicking on the popup will accidentally dismiss it.
The following code snippet showcases the functioning implementation:
@Component({
selector: 'my-app',
template: `
<h4 class="example" (click)="showPopup = true">
Click to show a correctly working popup
</h4>
<div *ngIf="showPopup" class="example popup">
Click anywhere besides here to dismiss me
</div>
`,
})
export class App {
public showPopup = false;
@HostListener('document:click', ['$event']) showThePopup(e: Event) {
if (!e.target.classList.contains('example')) {
this.showPopup = false;
}
}
}
However, modifying the template in the following manner will result in a failure:
@Component({
selector: 'my-app',
template: `
<h4 class="example" (click)="showPopup = true">
Click to show a popup that will fail
</h4>
<div *ngIf="showPopup" class="example popup">
<p>Clicking here will dismiss me, which should not happen</p>
</div>
`,
})
What coding approach could be adopted to ensure the correct behavior of the code?
To access the working Plunker version, please follow the link: http://plnkr.co/edit/7viqp6bR8LesM7lCsNQW?p=preview