Angular Material Dialog not closing after navigation

Question

I\'m working on an application that shows an overview of entities in a datatable. Every entity has linked entities that are shown as \'xxx linked entities\' in a column. When th

Answer 1

Hi according to the docs it says: closeOnNavigation: Whether the dialog should close when the user goes backwards/forwards in history.

History Navigation Normally means browser back and forward buttons: https://developer.mozilla.org/en-US/docs/Web/API/History_API

What you could do in your scenario however is instead of routing directly from your html is create a function that will route after the dialog is closed this way you can ensure that you close the dialog first before initiating your navigation.

   {{linkedEntity.name}}

Inside your component have something like

  navigateToEntity(event) {
    this.dialogRef.afterClosed.pipe(
      tap(() => this.router.navigate(['navigate to wherever'])),
      first()
    ).subscribe();
    this.dialogRef.close();
  }

Hope this helps, i haven't worked much with Material Components but reading through some of the docs this is how i would implement it.