For anyone else who may have this problem:
The problem was I didn't read the API reference properly on the angular materials website, the part that said I had to import MatSortModule. After I changed my imports list in app.module.ts to
imports: [
BrowserModule,
MatTableModule,
MatSortModule
],
it worked fine
This option is already available
let dialogRef = dialog.open(DialogExample, {
height: '400px',
width: '600px',
closeOnNavigation: true
});
Other ways using routes changes events:
1. From app component
constructor(router: Router, matDialog: MatDialog) {
// Close any opened dialog when route changes
router.events.pipe(
filter((event: RouterEvent) => event instanceof NavigationStart),
tap(() => this.matDialog.closeAll())
).subscribe();
}
2. From dialog component
@Component({
selector: 'example-dialog',
templateUrl: 'example-dialog.html',
})
export class ExampleDialog {
constructor(
public dialogRef: MatDialogRef<ExampleDialog>,
router: Router
) {
// Close dialog ref on route changes
router.events.pipe(
filter((event: RouterEvent) => event instanceof NavigationStart),
tap(() => this.dialogRef.close()),
take(1),
).subscribe();
}
}
Best Answer
I worked around this by using a "fake route" via "#" link:
This "technique" can also be used for angular material's dialog component. It doesn't look very idiomatic to me, so if someone has an easier way of doing this, please post an answer!