Angular material dialog does not display data (bug)

Question

I tried to reusable the same component dialog, and I can not solve that. I used angular v.12

I created a DialogService, which is called from a component, and sent data to him. The DialogService opens a dialog with given data. The first call for this method is well, I got the dialog with wanted data and actions, but each other request is a problem. It's an empty dialog, without data and any actions.

Dialog component .ts

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-confirm-mobile',
  templateUrl: './confirm-mobile.component.html',
  styleUrls: ['./confirm-mobile.component.css']
})
export class ConfirmMobileComponent implements OnInit {

  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private mdDialogRef: MatDialogRef<ConfirmMobileComponent>) { }

  ngOnInit(): void { }

  public cancel() {
    this.close(false);
  }

  public close(value) {
    this.mdDialogRef.close(value);
  }

  public confirm() {
    this.close(true);
  }
}

Dialog component .html

<h1 mat-dialog-title>{{data.title}}</h1>
<div mat-dialog-content>{{data.contentBefore}} <code>{{data.code}}</code>{{data.contentAfter}}</div>
<div mat-dialog-actions>
    <button mat-button *ngIf="data.showButtonClose" (click)="cancel()">{{data.textButtonClose}}</button>
    <button mat-button *ngIf="data.showButtonOk" (click)="confirm()">{{data.textButtonOk}}</button>
</div>

DialogService .ts

import { Injectable } from '@angular/core';
import { MatDialogModule, MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';
import { ConfirmMobileComponent } from 'src/app/dialogs/confirmDialogs/confirm-mobile/confirm-mobile.component';

@Injectable({
  providedIn: 'root'
})
export class DialogServiceService {

  constructor(public dialog: MatDialog, private dialogRef: MatDialogRef<ConfirmMobileComponent>) { }

  public open(data: any) {

    this.dialogRef = this.dialog.open(ConfirmMobileComponent, { data, width: '400px', disableClose: true });
  }

  public confirmed(): Observable<any> {
    return this.dialogRef.afterClosed().pipe(take(1), map(result => {
      return result;
    }))
  }

  ngOnDestroy(): void {
  }
}

Component called DialogService

  this.dialogService.open({
              "title": title,
              "contentBefore": contentBefore,
              "code": code,
              "contentAfter": contentAfter,
              "showButtonClose": showButtonClose,
              "showButtonOk": showButtonOk,
              "textButtonClose": textButtonClose,
              "textButtonOk": textButtonOk
            });
    
            this.dialogService.confirmed().subscribe(result => {
              console.log('Response first dialog');
              console.log(result); //it's well result
             
              //here call the new method
            })

Result of the first call

After confirming the mobile phone, sent a request to the backend for checking. On the backend response, I opened again the same dialog, with different data.

Call the second time dialog

//call dialog for second time
        this.dialogService.open({
          "title": title,
          "contentBefore": contentBefore,
          "code": code,
          "contentAfter": contentAfter,
          "showButtonClose": showButtonClose,
          "showButtonOk": showButtonOk,
          "textButtonClose": textButtonClose,
          "textButtonOk": textButtonOk
        } as ConfirmDialog);

        this.dialogService.confirmed().subscribe(result => {
          console.log('Response secound dialog');
          console.log(result);
        })

Result of the second call (as you can see, the second action I called from subscribe part of the method (API response))

Now if I touch inspect element window, (little move to bottom or top) I will get wanted results.

Anyone does maybe know what is the problem?

Answer 1

this solution works for me:

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

export class AppComponent {
  constructor(private zone: NgZone) {}


  private openDialog() {
    this.zone.run(() => {
      this.dialog.open(ConfirmMobileComponent, { data, width: '400px', disableClose: true });
    });
  }