Angular Mat Dialog does not close

Question

I have the unusual issue that my opened MatDialog component won't close in my Angular application. I don't use HTML as view but SVG in my calling component, which is handled a little bit different. Unfortunately I can't figure out what the problem is.

Here is the calling component:

CallingComponent.ts

  constructor(public dialog: MatDialog) {}

  openDetailsDialog() {
    const dialogRef = this.dialog.open(NodeDetailsComponent, {
      width: '250px',
      data: {componentTitle: this.componentTitle},
      backdropClass: 'node-details-backdrop'
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log("NodeDetailsDialog closed.");
      this.componentTitle = result;
    });
  }

CallingComponent.svg

<svg:rect [class]="classes" x="50" y="20" rx="20" ry="20"></svg:rect>
<svg:g ng-node-content></svg:g>
<svg (click)="openDetailsDialog()">
  <g>
    <svg:rect class="test" x="110" y="75" rx="5" ry="5"></svg:rect>
    <svg:text x="119" y="90" font-family="Verdana" font-size="15" fill="black">O</svg:text>
  </g>
</svg>
<svg:g [baseNode]="baseNode" ng-node-controls></svg:g>

The openDetailsDialog() method opens the dialog, which works without problems. Only it can't be closed then. Now follows the called component:

NodeDetailsComponent.ts

export class NodeDetailsComponent {

  constructor(
    public dialogRef: MatDialogRef<NodeDetailsComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData
  ) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

NodeDetailsComponent.html

<h1 mat-dialog-title>{{data.componentTitle}}</h1>
<div mat-dialog-content>
  <p></p>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">Close</button>
</div>

If more information is needed to debug this, then I will gladly submit it!

Unfortunately did not work either. Regarding the description "Whether the dialog should restore focus to the previously-focused element, after it's closed." this seems to be something I want to be true. — rzett, Oct 04 '21 at 05:25
i assumed this behavior breaks everything for svg component. anyway you aren't using tabindex and thus your svg cannot be focusable — Andrei, Oct 04 '21 at 10:57

score 2 · Accepted Answer · answered Oct 05 '21 at 23:45

I managed to find a solution and it annoys me a little bit, because I did not find any suggestion regarding this, as well as did not get any error or exception from my code snippet above.

So, here we go: I just needed to add the BrowserAnimationsModule to my @NgModule imports like this:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    MatDialogModule,
    BrowserAnimationsModule
  ],
  exports: [
    ...
  ]
})

That's it. That was the whole magic.

Victor · Answer 2 · 2021-10-03T21:39:06.597

1

If you only want to.close it, without sending any values you can use mat-dialog-close

    <button mat-button mat-dialog-close>Close</button>

edited Oct 03 '21 at 21:39

answered Oct 03 '21 at 21:33

Victor

99
3

I tried this already and unfortunately it did not change the behaviour. I forgot to mention, that the closing method gets executed. It just does not close the dialog. – rzett Oct 03 '21 at 22:10

Angular Mat Dialog does not close

2 Answers2