Are there general problems between routing and mat-dialog?

137 views

Skip to first unread message

JB_0701

unread,

Jan 17, 2019, 4:42:24 AM1/17/19

to Angular and AngularJS discussion

Hello!

What I wanted to do was to open a mat-dialog by clicking on an icon. This mat-dialog is a split panel that has to the left side buttons that can be clicked and to the right side a content space where other components are supposed to be loaded on click on the specific button. Now, I followed the guidelines of the original documentation for routing on https://angular.io/guide/router , but when I clicked the first icon to open the dialog, it's style was changed and it didn't open in form of a dialog anymore. Now I figured I could just keep the dialog style by changing the url within the method of calling the dialog like this

dialogRef.afterOpened().subscribe(result => {
      this.router.navigate(['/dialog']);
    });
   dialogRef.afterClosed().subscribe(result => {
     this.router.navigate(['']);
    });

Like this the url changed with opening anf closing the dialog the way I wanted. But I've got another routing-module with another component, which is working perfectly fine, before opening the dialog,but does not work anymore afterwards. And now the loading of the component via routing and using 'router-outlet' in the html tag does not work either. Now, my question is if there are some general problems with mat-dialog and routing that I might solve by using a different way?

Is it necassary to code a custom dialog (not using mat-dialog)?

I had everything working fine before with a service, though I thought changing the url and opening the components by navigation would be a lot less code and a nicer solution.

Hopefully, someone can explain this problem to me and what is actually happening. I might provide more general code, but like I said I pretty much followed the official documentation. Thanks in advance!

Sander Elias

unread,

Jan 24, 2019, 11:25:27 PM1/24/19

to Angular and AngularJS discussion

Hi jb,

dialogRef.afterOpened().subscribe(result => { this.router.navigate(['/dialog']); });

Would that not destroy the dialog, as it is alraedy inside the router-outlet you care now moving away from?
If that’s not the case, can you build a StackBlitz to show your issue?