Parent component

constructor(private dialog: MatDialog) {}

  openCreateMetric() {
    this.dialog.open(MetricCreateComponent, {
      width: '50%',
      disableClose: true,
      autoFocus: 'dialog',
    });
    this.dialog.afterAllClosed.subscribe((closeTrigger) => {
      console.log(closeTrigger) --> Always undefined at the parent
      this.loadFlag.next(Math.random())
    });
  }

Child component

export class MetricCreateComponent extends AppComponentBase implements OnInit, AfterViewInit{
    constructor(private dialogRef: MatDialogRef<MetricCreateComponent>,
            @Inject(MAT_DIALOG_DATA) public input: MetricDetailsDto) {   
        }
    
     onDialogCloseClick(): void {
            this.dialogRef.close({data: false})
        }
}

Template

  <button mat-icon-button tabindex="-1" (click)="onDialogCloseClick()">
      <i ></i>
  </button>

Always getting undefined at the parent console.log(closeTrigger)

CodePudding user response：

You should look into using afterClosed instead of afterAllClosed. The latter is of type Observable<void>.

const dialogRef = this.dialog.open(MetricCreateComponent, {
  width: '50%',
  disableClose: true,
  autoFocus: 'dialog',
});

dialogRef.afterClosed().subscribe((closeTrigger) => {
  console.log(closeTrigger);
  this.loadFlag.next(Math.random());
});