data not getting updated in template ref modal after opening in angular

I have a login screen where my component has 2 template refs as a modal. One for loading bar and another is for any kind of error

I'm able to send Logging in.. text in loading bar. But while trying to login if there's any error, the second template ref is supposed to show error. The error text is logging in console log before opening the template but not getting displayed on modal. Modal is opening but it is showing blank screen. Here is the html code

<ng-template #loadingTemplate let-data>
    <div class="loadingBar" >
        <p class="loading-note" >{{data.message}}</p>
        <mat-spinner></mat-spinner>
    </div>
</ng-template>
<ng-template #modalRoleSelect let-data>
    <div class="loadingBar" >
        <p class="loading-note2">{{data.loginText}}</p>
    </div>
    <div style="display: flex;justify-content: flex-start;" >
        <button style="margin: 10px 20px;font-weight: bold;letter-spacing: 0.5px;" mat-raised-button (click)="closeDialog()" >Close</button>
    </div>
</ng-template>

Here is the typescript code

openTemplate(error:string) {
      console.log(error)
      const dialogRef1 = this.dialog.open(this.customTemplate, {
          data: {loginText:error},
         width: '470px'
      });
      dialogRef1.afterClosed().subscribe(() => {
        console.log('The dialog was closed');
      });
  }

While the modal is in opened state, if i try to click any radio buttons the error is showing. I'm guessing something wrong with change detection

Can someone help me with this??

I've fixed this issue by myself. I'm calling template dialog in ngzone. Now it is checking for change detection and Error is getting rendered

this.zone.run(() => this.dialog.open(this.customTemplate, {
        data: {loginText:error},
       width: '470px'
    }))