Angular material Modal dialog not able to pass event to parent?

Question

I have a component which has one child component. Child component has a button which will open a material dialog Box. In dialog we have form, username and passwrod and submit button. When I submit i am calling backend REST api.

this is getting called in child component:

dialogRef.afterClosed().subscribe(result => {
      console.log("result", result);
      this.onModalClosePassData.emit(result);//emit to parent
    });

which is sending event to parent. updateComment() is getting called and I can see the data in console.

But when I fill the form and click on submit. It calls submitForm method which is asynchronus call and I am closing dialog after successful login.But then event is not emmiting. updateComment() is not getting called.

See the full code:

parent component.html

<ng-template #showTextOnly>
        <child-component [branch]="releaseBranch" [date]="dateString"
                  (onModalClosePassData)="updateComment($event)">
        </child-component>
</ng-template>

parent component.ts

//This method is getting called when i click on backDrop, 

but If i logged in successfully this is not getting called updateComment(event:any){ consile.log(event); }

child-component.html

<button class="btn btn-default" (click)="openDialog()">Login</button>

child-component.ts

export class ChildComponent implements OnInit {
    @Output() onModalClosePassData = new EventEmitter();
    constructor(public dialog: MatDialog) { }
    openDialog(): void {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = false;
    dialogConfig.autoFocus = false;
    dialogConfig.hasBackdrop= true;
    dialogConfig.width = '300px';
    dialogConfig.autoFocus=true;
    dialogConfig.data = {branch: this.branch, date: this.date};
    const dialogRef = this.dialog.open(LoginDialog, dialogConfig);

    dialogRef.afterClosed().subscribe(result => {
      console.log("result", result); //result is getting called in both cases
      this.onModalClosePassData.emit(result);
    });
 }
}

LoginDialog.component.ts

import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
export class LoginDialog implements OnInit{
    constructor(private loginService: LoginService, public dialogRef: MatDialogRef<LoginDialog>,
      @Inject(MAT_DIALOG_DATA) public data: any) {}
      public submitForm = (formValue: any) => {
      if (this.noteForm.valid) {
        let encryptData = btoa(`${formValue.username}:${formValue.password}`);
        this.loginService.login(encryptData)
         .subscribe((response:any)=>{
             if(response.STATUS === "FAILED"){
             } else {
              this.dialogRef.close(this.noteDetail);
             }
        })
      }
    }

}
LoginDialog.component.html

<form [formGroup]="noteForm" autocomplete="off" novalidate (ngSubmit)="submitForm(noteForm.value)">
<mat-dialog-content class="mat-typography">
        <mat-form-field>
                <mat-label>User Name</mat-label>
                <input matInput type="text" formControlName="username" id="username">
        </mat-form-field>
        <mat-form-field>
                <mat-label>Password</mat-label>
                <input matInput type="password" formControlName="password">
        </mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="center">
  <button mat-raised-button color="primary" [disabled]="!noteForm.valid">Submit</button>
</mat-dialog-actions>
</form>

Answer 1

I have faced same issue and figured it out, may be this is usefull for others.

We will get this issue when we used custom component on modal. For example, we have formComponent on pop up modal and on submit we need to close the modal and emit the form value, this should work but we can face the issue when our formComponent is destroyed before emitting the value.

This is because we opened our formComponent on Modal later on form submit we closed the modal which contains formComponent and opened success modal then trying to emit the value.

Solution is: Don't close modal which contains formComponent before emmiting the value or else use a service to trigger.