Route to other page from Modal in Angular

2
votes

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

5
angularroutingmodal-dialog
What you have tried yet? – enno.void
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
Please provide your code, otherwise it is very hard to determine the solution – enno.void

5 Answers

3
votes

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.

1
votes

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.

1
votes

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>
0
votes

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(); 
          }
        }
      })
0
votes

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>