Angular Mat Dialog does not close

Issue

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!

Solution

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.

Answered By - rzett