How to Hide and Show Popup dialog based on Condition In Angular? - html

Question

I have a Suspend Toggle(ON/OFF) in Update form which is used for suspending and un-suspending the Row value of a Table as shown below in image.
On click of Suspend Toggle, It should call Service method and suspend/unsuspend the row without opening the Suspend dialog as shown below.
The Suspend dialog only should open, if on click of Suspend toggle(ON/OFF), validations return some warning message.
Below is code for Suspend dialog HTML.
<div class="container mt-2" style="width: 500px; height: 90px">
<div class="spinner" *ngIf="loadspinner" align="center"></div>
<div *ngIf="!loadspinner">
<mat-dialog-content>
<p style="color:rgb(255, 60, 0)">{{errorMsg}}</p>
<p align="center">{{warningMsg}}</p>
</mat-dialog-content>
<mat-dialog-actions align="center">
<button *ngIf="errorMsg ; else elseBlock" mat-raised-button mat-dialog-close tabindex="-1" (click)="oKBtn()" style="border-color:#3f51b5;">OK</button>
<ng-template #elseBlock>
<button mat-raised-button color="primary" [mat-dialog-close] = "true">SUSPEND</button>
<button mat-raised-button mat-dialog-close tabindex="-1" (click)="cancel()" style="border-color:#3f51b5;">Cancel</button>
</ng-template>
</mat-dialog-actions>
</div>
Update Dialog is Parent .ts for child suspend dialog .ts
Below is code for child suspend.ts
constructor(public dialogRef: MatDialogRef<SuspendModalComponent>,
#Inject(MAT_DIALOG_DATA) public data:DialogData, private updateService: UpdateService) {
this.mainData = this.data; }
ngOnInit() {
if (this.mainData.buttonChecked == false) {
this.updateService.validate(this.mainData.updateData).subscribe(value => {
this.loadspinner = false;
if (value != null) {
this.warningMsg = value.statusMessage;
} else {
this.warningMsg = "";
}
});
} else {
this.updateService.validateRecord(this.mainData.updateData).subscribe(record => {
this.loadspinner = false;
if (record != null) {
this.errorMsg = "Record is present";
}
});
}
}
cancel() : void {
this.dialogRef.close();}
Suspend/unsuspend service methods i'm calling from suspend() function of parent update.ts as shown in code.
suspend(){
const list: any[] = Array.of(this.mainData.updateData);
if(this.toggleRef.checked) {
if(this.toggleRef.record == null) {
this.updateService.unsuspendCall(list).subscribe(data => {
this.toggleRef.checked = true;
this.buttonChecked = false;
});
}
} else {
if(this.toggleRef.value == null) {
this.updateService.suspendCall(list).subscribe(data => {
this.toggleRef.checked = false;
this.buttonChecked = true;
});
}
}
Can anyone help on this how to hide suspend dialog if there is no validations message on click of Suspend Toggle button and show the dialog if validation message is there?