question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Backdrop stays open after navigate using routerlink from inside mat dialog

See original GitHub issue

What is the expected behavior?

When clicking an element with the routerLink directive, the navigation should close the dialog and make the backdrop disappear

What is the current behavior?

The dialog closes but the backdrop stays open. Doesn’t work even with closeOnNavigation: true or with applying mat-dialog-close to the element that has the routerLink directive

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV
Have an element with a routerLink directive inside a mat dialog template and click on it to navigate.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular Core: 7.2.5 Angular Material: 7.3.2

Is there anything else we should know?

github_iconTop GitHub Comments

flensrockercommented, Oct 21, 2019

Any news on this?

My current workaround:

private _dialogRef: MatDialogRef<ModalComponent> = null;

openDialog() {
    this._dialogRef = this._dialog.open(ModalComponent);
    this._dialogRef.afterClosed().subscribe(() => this._dialogRef = null);
}

ngOnDestroy() {
    if (this._dialogRef) {
        this._dialogRef.close();
    }
}
0reactions
angular-automatic-lock-bot[bot]commented, Sep 13, 2020

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Backdrop stays open after navigate using routerlink ... - GitHub
The dialog closes but the backdrop stays open. Doesn't work even with closeOnNavigation: true or with applying mat-dialog-close to the element ...
Read more >
Close Angular Material Dialog On Browser Back
1. From app component · 2. From dialog component · 1. Configure dialog not to close on navigation · 2. Add CanActivateChild guard...
Read more >
Routing to Angular Material Dialogs | by John Crowson | ngconf
Now our dialog opens when the user navigates to “/home/dialog”, but it does not return to “/home” after the dialog is closed. Navigate...
Read more >
Angular Material Dialog not closing when I navigate to a new ...
I have a popup that asks if you want to make a Google or Windows account. When I click on either of the...
Read more >
how to prevent mat dialog close on click outside - You.com
Use the Event.stopPropagation() function on the outer-most parent of your form inside the menu. You might also want to prevent the menu from...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found