CODEWITHSUNDEEP
angular
mevr
mevr

Reputation: 1125

router navigate function not loading the component view, the route only changes

I have a parent module with two sibling components. I just need to load the second sibling component when am call a method in sibling 1.I am using router.navigate function to do this but the component view is not loading only route changes in browser's address bar.

parentcomponent

  siblingcomponent1

  siblingcomponent2

parentcomponent.routing.module.ts


parentcomponent.routing.module.ts:-

    { path: '', redirectTo: 'sibling1', pathMatch: 'full' },
     {
      path: 'sibling1',
      component: siblingcomponent1,
     },
     {
      path: 'sibling2',
      component: siblingcomponent2,
     },

 parentcomponent.ts:-

   showSibling1 = false;
   showSibling2 = false;

    ngOnInit() {

     switch(this.router.url) { 
       case 'sibling1': { 
         this.showSibling1 = true;
          break; 
       } 
        case 'sibling2': { 
         this.showSibling2 = true;
         break; 
        }
    }

 parentcomponent.html:-

  <app-siblingcomponent1
   *ngIf="showSibling1"
  ></app-siblingcomponent1>

  <app-siblingcomponent2
   *ngIf="showSibling2"
  ></app-siblingcomponent2>


 app-siblingcomponent1.ts:-

  method() {

  // here the route changes in browser address bar but component is not loading why?
  this.router.navigate(['sibling2']);

  }

app.component.html :-

 <router-outlet></router-outlet>

Upvotes: 4

Views: 7701

Answers (2)

ruben
ruben

Reputation: 1750

Also check that your router outlet is properly placed.

<router-outlet></router-outlet>

Upvotes: 1

David Kidwell
David Kidwell

Reputation: 720

Here are a few things you can try to debug this,

  1. Add a wildcard route to the bottom of your routes, that way you have visual feedback when your app is not able to find a route you have given it. It will look something like this,

    { path: '**', component: PageNotFoundComponent }

  2. Try going to the route you want directly, ie type 'localhost:4200/sibling2' into your browser and try to load it that way.

  3. Make sure that the route you are seeing when router.navigate fires is correct. I have always been in the habit of adding a slash (/) inside the route string I pass into the navigate() function,

    this.router.navigate(['/sibling2']);

    But as long as you see the correct route in the URL you should be okay.

Upvotes: 3

Related Questions