Search code examples
angularangular2-routingng-bootstrap

Route to another page/component from modal in Angular and Ng bootstrap


I am trying to navigate from the modal dialog to another page however it does not navigate but only changes the url location.

A very basic stackblitz is here https://stackblitz.com/edit/angular-j4rahu-oj8pcn As you can see the edit component is never navigated to.

EDIT: Sorry, I thought I had the blitz forked but it was wrong link. Apologies and now I have the new blitz. It has the router module

EDIT: to reproduce the issue. click LaunchModal => click close. Should navigate to edit component.


Solution

  • Ahh!!!

    You have mention <router-outlet></router-outlet> in your app.component.html file

    I replaced

    <ngbd-modal-component></ngbd-modal-component>
    

    With

    <router-outlet></router-outlet>
    

    And it started working

    As <router-outlet> handles routes and renders components specified in Routes array

    More information https://angular.io/api/router/RouterOutlet