Ouvrir matdialog et la fermer

Bonjour, je développe une application angular. J'utilise MatDialog pour ouvrir une boite de dialogue. Je n'arrive pas à la fermer

Je l'ouvre de cette façon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
    openDialog(event) {
      const dialogConfig = new MatDialogConfig();
      dialogConfig.autoFocus = true;
      dialogConfig.position = {
        top:  bottom + 'px',
        right: '0px'
      };
      dialogConfig.width = '50%';
      dialogConfig.height = '590px';
 
      this.dialog.open(UserDialogComponent, dialogConfig);
 
      const dialogRef = this.dialog.open(UserDialogComponent, dialogConfig);
 
      dialogRef.beforeClose().subscribe((result: string) => {
        console.log('RIght before close,', result);
      });
      dialogRef.afterClosed().subscribe(result => {
        console.log('The dialog was closed', result);
      });
    }

J'injecte MatDialogRef dans le constructeur de i UserDialogComponent:

Code:

1
2
3
4
5
6
7
8
9
10
 
    constructor(
        private formBuilder: FormBuilder,
        private dialogRef: MatDialogRef<UserDialogComponent>,
        @Inject(MAT_DIALOG_DATA) data) {
          console.log("Constructor UserDialogComponent START");
          console.log(dialogRef);
          this.dialogRef = dialogRef;
          console.log("Constructor UserDialogComponent END");
         }

Et je ferme ma boite de dialogue dans cette fonction

Code:

1
2
3
4
5
6
 
      close() {
        console.log(this.dialogRef);
        console.log('CLOSE CLICKED');
        this.dialogRef.close(true);
      }

Mais this.dialogRef est un objet vide et je reçois cette erreur quand j'appelle cette fonction

Code:

1
2
 
    ERROR TypeError: "this.dialogRef.close is not a function"

Pouvez vous m'aider ?