Angular Dialog: How to make the button open or close depending on state

Question

I am using the Dialog component and I need the main button to close the dialog when the dialog is opened. I am using the dialog with no backdrop overlay because I need the user to interact with the page while the dialog is opened. The close button of the dialog works fine. I tried the @input with a new variable and I tried the getState and MatDialogState without success, I just break my button. I couldn't find any examples. Here is my code :

export class DialogButton {

  constructor(
    public dialog: MatDialog,
    public dialogRef: MatDialogRef<DialogComponent>,
    ) { }

    toggleDialog() {
          this.dialog.open(DialogComponent, {
          id: 'legend-button-dialog-container',
          disableClose: false,
          hasBackdrop: false,
          });
        }
}

Answer 1

try something like this, should work

dialogRef = null;

toggleDialog() {
    if(this.dialogRed === null){
        this.dialogRef = this.dialog.open(DialogComponent, {
            id: 'legend-button-dialog-container',
            disableClose: false,
            hasBackdrop: false,
        });
    }else{
        this.dialogRef.close();
        this.dialogRef = null;
    }
}