Material dialog pops up blank before showing letters on it

Issue

I am using angular 9.1.13 with material 9.2.4 in my electron application. I have noticed the following strange behaviour concerning the Material Dialog component.

When I try to pop up a simple dialog with only text, the dialog pops up empty in the first place, and after some milliseconds (usually 300-1000) the letters are shown up. Screenshots shown below:

When i open the dialog

After some milliseconds

The implementation of the pop up is the following:

MyDialogComponent

export class MyDialogComponent {
public infoMessage: string;

constructor(
    @Inject(MAT_DIALOG_DATA) private data: any,
    private dialogRef: MatDialogRef<MyDialogComponent>
) {
    if (data) {
        this.infoMessage = data.message;
    }
}

public static getConfig(): any {
    return {
        width: '500px',
        height: 'auto',
        disableClose: true,
        panelClass: 'dialog-info',
        backdropClass: 'dialog-info-bg'
    };
}
}

I am popping up the dialog as shown below:

const config = MyDialogComponent.getConfig();
config.data = {message: 'My text that comes later than pop up'};
this._dialogService.open(MyDialogComponent, config);

where _dialogService is the MatDialog

private _dialogService: MatDialog

Html code of MyDialogComponent

<div class="modal modal fade">
<div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="message">{{ infoMessage }}</h5>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn modal-btn close-btn">Close
            </button>
        </div>
    </div>
</div>

I have searched on the web about this strange behaviour but have not yet found any satisfying answer on how to deal with this issue, thanks in advance

Solution

You may have an issue with change detection - Electron events and APIs don't trigger change detection in Angular. Try using ChangeDetectorRef or NgZone:

import { OnInit, ChangeDetectorRef } from '@angular/core';

...

export class MyDialogComponent implements OnInit {
public infoMessage: string;

constructor(
    @Inject(MAT_DIALOG_DATA) private data: any,
    private dialogRef: MatDialogRef<MyDialogComponent>,
    private cdr: ChangeDetectorRef
) { }

ngOnInit() {
    if (data) {
        this.infoMessage = data.message;
        this.cdr.detectChanges();
    }
}

or

import { NgZone } from '@angular/core';

...

export class MyDialogComponent {
public infoMessage: string;

constructor(
    @Inject(MAT_DIALOG_DATA) private data: any,
    private dialogRef: MatDialogRef<MyDialogComponent>,
    private zone: NgZone
) {
    if (data) {
        this.zone.run(() => {
            this.infoMessage = data.message;
        });
    }
}

Alternately you can make sure the command to open the dialog is properly picked up by Angular's change detection:

this.zone.run(() => {
    const config = MyDialogComponent.getConfig();
    config.data = {message: 'My text that comes later than pop up'};
    this._dialogService.open(MyDialogComponent, config);
});

If this resolves your problem, keep in mind for the rest of your app that anything coming from Electron will need the same handling in order to update the UI/rendered HTML.

Answered By - codequiet