In my login screen component, I have implemented 2 template refs within a modal. One for displaying a loading bar and the other for showing any errors that may occur.
While the loading bar successfully displays the "Logging in.." text during the login process, the error message is not being shown when an error occurs. Although the error message is logged in the console before opening the template, the modal opens to a blank screen.
Below is the HTML code snippet:
<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 snippet:
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');
});
}
Although clicking on radio buttons while the modal is open does display the error message, there seems to be an issue with change detection. Any help on resolving this matter would be appreciated.