how to navigate from sibling component to another sibling component in Angular?

Question

Below is my app.routing.ts

export const Approute: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent
      },
      {
        path: 'trip-details',
        component: TripDetailsComponent
      }
    ]
  },
  { path: 'not-found', component : NotFoundComponent },
  { path: '**', redirectTo: '/not-found' }
 ];

component.ts

 viewDetails(details) {
     ...
    this.route.navigate(['../trip-details']);
  }

Above i have a component and am trying to navigate to another sibling component but am not able to navigate to http://localhost:4200/home/trip-details its redirecting me to http://localhost:4200/not-found.

Where am doing wrong?

Raghav · Accepted Answer · 2018-03-26 08:54:02Z

5

You can specify relativeTo which route as shown below:

import {Router, ActivatedRoute } from '@angular/router';
constructor(private r: ActivatedRoute) { }

viewDetails(details) {
    ...
    this.route.navigate(['../trip-details'], { relativeTo: this.r });
  }

answered Mar 26, 2018 at 8:54

Raghav

1,2294 gold badges20 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ForestG · Accepted Answer · 2018-03-26 08:54:21Z

4

You should navigate like this:

this.route.navigate(['home', 'trip-details']);

Or, move trip-details one level higher in the routes, and then you can navigate to it directly with

this.route.navigate(['trip-details']);

answered Mar 26, 2018 at 8:54

ForestG

18.2k16 gold badges64 silver badges94 bronze badges

Comments

Emon · Accepted Answer · 2018-03-26 08:59:47Z

2

Because angular can not found the url as ../trip-details

You should use this.route.navigate(['/home/trip-details']);

Juse add 'home' in front of the url

answered Mar 26, 2018 at 8:59

Emon

1,5891 gold badge18 silver badges24 bronze badges

Collectives™ on Stack Overflow

how to navigate from sibling component to another sibling component in Angular?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related