Within my project, I am utilizing Angular 6.0.6 and Angular Material 6.3.0. One issue I have encountered is with a dialog component that I have added to the entryComponents in the app module. Strangely, when I attempt to open this dialog within the rightclick event handler of a Google Maps marker, it appears empty most of the time.
Here is an example where the dialog shows up as empty:
private attachEvents(wo) {
wo.marker.addListener('rightclick', (e) => {
this.dialog.open(DialogAlert, {
width: '400px',
data: {
confirmation: true,
message: 'test',
title: 'X'
}
});
});
}
Interestingly, if I place the open code outside of wo.marker.addListener, the dialog functions correctly.
I would greatly appreciate any suggestions on how to make the dialog work properly inside the event handler. I've attempted calling detectChanges using ChangeDetectorRef within the event handler, but it does not resolve the issue.
The HTML code for the dialog is as follows:
<h1 mat-dialog-title>{{data.title ? data.title : defaultTitle}}</h1>
<div mat-dialog-content>
<p>{{ data.message }}</p>
</div>
<div mat-dialog-actions>
<button *ngIf="confirmation" mat-raised-button (click)="onNoClick()">Cancel</button>
<button *ngIf="confirmation && !options" mat-raised-button (click)="onConfirmClick()" cdkFocusInitial>Yes</button>
<button color="primary" *ngFor="let o of options; index as i" mat-raised-button (click)="onConfirmClick(i)">{{o}}</button>
<button *ngIf="!confirmation" mat-raised-button (click)="onConfirmClick()" cdkFocusInitial>OK</button>
</div>
If I add content to the HTML before mat-dialog-title, mat-dialog-content, or mat-dialog-actions, it displays correctly.
Additionally, here are some observations:
- No errors or warnings appear in the console.
- I am unable to close the dialog by clicking on the shadow area (unless the content is displayed).
- Occasionally, the content will display after a slight delay.
- Resizing the browser window can trigger the content to appear in an empty dialog.
- These tests were conducted using the latest version of Google Chrome.