CODEWITHSUNDEEP
angularroutesmodal-dialog
jakob witsch
jakob witsch

Reputation: 161

Route to other page from Modal in Angular

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

Upvotes: 4

Views: 14337

Answers (5)

aditya
aditya

Reputation: 595

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>

Upvotes: 0

Igor Kurkov
Igor Kurkov

Reputation: 5040

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

Upvotes: 0

Devang Patel
Devang Patel

Reputation: 1843

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.

Upvotes: 5

Flyii
Flyii

Reputation: 1155

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>

Upvotes: 1

nircraft
nircraft

Reputation: 8468

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.

Upvotes: 1

Related Questions