How to check if child component has unsaved data before closing-CodePudding

In my app a previous developer used a Infragistics OverlayService to display some components in a modal mode which worked ok but over time while using other 3 party controls i found many issues like the zIndex etc and some other strange behavior. So what i am trying to do without breaking everything is to replace the OverlayService with the Angular Dialog. In process of doing so i come across the issue how to close the dialog if user clicks on the x in the right corner. Normally that would not be an issue as i just could call the

this.dialogRef.close()

but that's not the case here since the X is in a different component. When user opens the dialog i use

const dialogRef = this.dialog.open(CreateQuickMailComponent,
     {
       disableClose: true, position: {
        top: '0px',
        right: '0px'
       },
        panelClass: 'inner-no-pad-dialog',
        autoFocus: false
      })

then the template code for this component looks like this

<app-header-container title="New Mail">
    <div >
        <app-quick-mail-form (edit)="edit($event)"></app-quick-mail-form>
    </div>
</app-header-container>

app-quick-mail-form is the form that has all the logic and from where i can close the dialog just fine with the this.dialogRef.close(). What i need is a way to do the same from the app-header-container which has the X in right corner on click.

My app-header-container template

<div >
    <igx-navbar title="{{ title }}">
        <igx-icon (click)="dismiss()">close</igx-icon>
    </igx-navbar>

    <ng-content></ng-content>
</div>

So I can close the dialog by using the this.dialogRef.close() and referencing private dialogRef: MatDialogRef but how can I check before I call the close() if the underlaying form is dirty to ask user if he wants to safe before closing ? Since this component is used by more then one component i cant hardcode the references.

So i am open for any ideas or suggestions

CodePudding user response：

You could add an @Input to your <app-header-container> component, to indicate whether or not dismissing should be allowed.

Each component that uses it could pass in whatever criteria makes sense:

<app-header-container title="New Mail" [allowDismiss]="!mailForm.isDirty">
    <div >
        <app-quick-mail-form #mailForm (edit)="edit($event)"></app-quick-mail-form>
    </div>
</app-header-container>

@Input() allowDismiss = true;

public dismiss() {
  if(!this.allowDismiss) {
    return;
  }

  this.dialogRef.close();
}