Need help with closing a modal popup when clicking on the overlay. Encountering an error: "ERROR TypeError: Cannot read property 'nativeElement' of undefined"
export class PopupComponent {
@ViewChild('window') popup: ElementRef;
visible = false;
openPopup: boolean;
constructor() { }
ngOnInit() {
}
overlayClicked(event) {
if(event.path.indexOf(this.popup.nativeElement) === -1){
this.visible = false;
}
}
.window__container {
display: block;
position: absolute;
min-width: 360px;
z-index: 10000;
}
.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
z-index: 2;
cursor: pointer;
}
<button md-icon-button (click)="openPopup()">Open</button>
<div class="overlay" (click)="overlayClicked($event)">
<div *ngIf="openPopup" class=window>
<h1>Hello</h1>
</div>
</div>