Discussion :

[flamant]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Pouvez vous m'aider ?

[flamant]

J'ai trouvé le bug, il y avait ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
    @Component({
      selector: 'app-user-dialog',
      templateUrl: './user-dialog.component.html',
      styleUrls: ['./user-dialog.component.scss'],
      providers: [
        {provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'accent' }},
        { provide: MatDialogRef, useValue: {} }
      ]
    })
    export class UserDialogComponent implements OnInit {

J'ai enlevé cette ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
    { provide: MatDialogRef, useValue: {} }

Et maintenant, ça marche bien