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

Answer 1

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.