Route to other page from Modal in Angular

Question

I created a modal using MatDialog. This Modal can be opened from my toolbar.

In the modal i have a tabbed page for login and sign up. Those are seperate components loaded via routing.

Now i want to close the modal and redirect the user to another page if he or she clicks a button inside the modal. The link gets updated but my content is not shown!

navbar->modal<->LoginComponent/SignupComponent (link in here should close modal and redirect)

SignupComponent.ts:(is inside the modal)

registerBuisnessClicked() {
this.dialogRef.close('signup');

}

navbar.ts:

dialogRef.afterClosed().subscribe(result => {
  if (result === 'signup') {
    console.log('redirecting to signup');
    this.router.navigate(['/signup']);
  }
});

For testing I created another toolobar item in my navbar, that directly routes to my signup and this works!

user() {
this.router.navigate(['/signup']);

}

Inside my Modal i have the following code:

modal.html

<nav mat-tab-nav-bar mat-align-tabs="center">

        <a mat-tab-link 
          (click)="switchToLogin()"
          [active]="rla1">
          Login
        </a>

        <a mat-tab-link 
          (click)="switchToRegister()"
          [active]="rla2">
          Register
        </a>

      </nav>

modal.ts

constructor(private router: Router) { }

ngOnInit() {
  this.router.navigate(['/login']);
  this.rla1 = true;
  this.rla2 = false;
}

switchToRegister() {
  this.router.navigate(['/signup'], { replaceUrl: true });
  this.rla1 = false;
  this.rla2 = true;
}

switchToLogin() {
  this.router.navigate(['/login'], { replaceUrl: true });
  this.rla1 = true;
  this.rla2 = false;
}

Thanks, Jakob

Well i injected the MatDialogRef in my login component tried to close the dialog from this and tried to navigate to my new page via the router then. However this only works if i refresh my page after clicking on the redirect button — jakob witsch, Dec 17 '18 at 14:30
Please provide your code, otherwise it is very hard to determine the solution — enno.void, Dec 17 '18 at 14:35

score 5 · Answer 1 · answered Dec 17 '18 at 14:39

5

When you close the modal you can simply use :

onClose() {
  this.dialogRef.close('closed');
}

To redirect it in another page you need to subscribe on close event from where you opened matDialog. Just like below:

dialogRef.afterClosed().subscribe((result) => {
  if (result === 'closed') {
       this.router.navigate(['routing-path']);
  }
});

I hope this will help.

answered Dec 17 '18 at 14:39

Devang Patel

1,795
4
21

Unfortunatelly i have the same problem. I get redirected but the page is not shown. I have to refresh to see the content of the component i am routing to – jakob witsch Dec 17 '18 at 14:46
I have modified my question for better understanding – jakob witsch Dec 17 '18 at 17:13
1

I think issue is not in 'navbar.ts' but in the component where you redirecting though Can you please share your code otherwise I think it is very hard to identify what is an issue. – Devang Patel Dec 18 '18 at 05:00
Thanks, this really helped me. Anyone getting a promise error can ignore it unless you want to do something extra then i recommend this other post that follows this post up: https://stackoverflow.com/questions/44085187/angular-router-promise-returned-from-navigatebyurl-is-ignored – Daniel Feb 09 '22 at 21:03

score 1 · Answer 2 · answered Dec 17 '18 at 14:35

You can simply add the routerlink to the login and sign up buttons/links. EX:

<nav>
 <a routerLink="/sign-up" routerLinkActive="active">Sign Up</a>
 <a routerLink="/login-route" routerLinkActive="active">Login</a>
</nav>

This should destroy the modal or component where modal is loaded and you should be redirected to the next route.

You can also achieve the same thing using by making use of (click) on the buttons and do certain operations before redirecting from component of modal.

EX:

 this.router.navigate(['../new-route'], { relativeTo: this.route });

Have a look at router example in documentation here.

score 1 · Answer 3 · answered Dec 17 '18 at 14:37

1

This is a simple example how a solution might look like

modal.component.ts

export class ModalComponent {

  constructor(
    public dialogRef: MatDialogRef<ModalComponent >,
    private router: Router,
  ) {

  }

  public navigateToSomewhere(): void {
    this.router.navigate(['somewhere']);
    this.dialogRef.close();
  }

}

modal.component.html

 <button(click)="navigateToSomewhere()">Navigate</button>

answered Dec 17 '18 at 14:37

Flyii

1,105
1
12
21

I actually tried this solution. If i click on the button the modal gets closed and the route is visible in the adress line, but i have to refresh to actually see the content of the component – jakob witsch Dec 17 '18 at 14:41
I have modified my question for better understanding – jakob witsch Dec 17 '18 at 17:13

score 0 · Answer 4 · answered May 22 '20 at 09:36

there are some another case, when a user clicks on NOT the (click) element but on [routerLink] element - so you can't handle this click as the click-event but need to close the modal somehow, because if the user clicks on routerLink element inside the modal - the modal will be not closed, but under the modal, the content will be redirected. So the solution is - listen to router.events inside the modal and check if this route was NavigationStart-ed - please, close the modal.

this.router.events.subscribe((event) => {
        if (event instanceof NavigationStart) {
          if (event.url === '/auth/forgot-pass') { //<= your route you observe as a click
            this.dialogRef.close(); 
          }
        }
      })

score 0 · Answer 5 · answered Aug 26 '21 at 08:22

Use mat-dialog-close directive on the links. This directive can be used on any element. So your code should look like

<a mat-dialog-close mat-tab-link 
      (click)="switchToLogin()"
      [active]="rla1">
      Login
    </a>

    <a mat-dialog-close mat-tab-link 
      (click)="switchToRegister()"
      [active]="rla2">
      Register
    </a>

Route to other page from Modal in Angular

5 Answers5