Cannot navigate another component in Angular

Question

I have a List and Details components in an application and I am trying to navigate to Details component by passing id parameter. However, there is not a reponse or error when calling the following method. I also share the routing.module:

routing.module

const routes: Routes = [
  {
    path: '',
    component: ListComponent,
    data: {...}
  },
  {
    path: '/details/:id',
    component: DetailsComponent,
    data: {...}
  }
];

list.component

constructor(private router: Router) {}

details(id) {
  // the code hits here and get the id parameter correctly
  this.router.navigate(['/details'], {
    queryParams: { id: id }
  });
}

details.component

constructor(private route: ActivatedRoute) { }

ngOnInit(): void {
  this.route.paramMap
    .subscribe(params => {
      let id = +params.get('id');
    });
}

So, what is wrong with this approach? The ngOnInit block of the details page is not fired.

Thanks, voted up. What about passing this received id value to the child component (that is called via ``<router-outlet></router-outlet>`)? — Jack
– Jack, Commented Dec 18, 2020 at 9:08
an element into <router-outlet> is not a children, if you has a children use @Input():angular.io/guide/… — Eliseo
– Eliseo, Commented Dec 18, 2020 at 9:51
Yes, what about passing data to a component in <router-outlet></router-outlet>? — Jack
– Jack, Commented Dec 18, 2020 at 21:23

KShewengger · Accepted Answer · 2020-12-20 00:50:00Z

2

In your route, you have specified '/details/:id' where ID is Router Param not a Query Param.

Thus, if you want to navigate to that url, use this instead:

ListComponent

this.router.navigate(['/details', id])

DetailsComponent

constructor(private route: ActivatedRoute) {}


ngOnInit() {
   const id = this.route.snapshot.params.id;      // Fetch the ID from your
                                                  // current route "/details/:id"
}

or you can also do it this way

ngOnInit() {
  this.route.params.subscribe(params => console.log(params.id))
}

More info on Angular Router Documentation

edited Dec 20, 2020 at 0:50

answered Dec 17, 2020 at 8:17

KShewengger

8,3293 gold badges27 silver badges38 bronze badges

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

2 Comments

Jack Over a year ago

Thanks, it seems to work, voted up. What about passing this received id value to a component in <router-outlet></router-outlet> ?

KShewengger Over a year ago

I'm quite not sure if I follow, but I have updated my answer based on what I have understood from your question

Stacks Queue · Accepted Answer · 2020-12-18 01:56:16Z

1

you have to add queryParamsHandling: 'merge' to your code

details(id) {
  // the code hits here and get the id parameter correctly
  this.router.navigate(['/details'], {
  queryParams: { id: id },
  queryParamsHandling: 'merge'
  });
}

edited Dec 18, 2020 at 1:56

answered Dec 17, 2020 at 8:32

Stacks Queue

1,3321 gold badge11 silver badges22 bronze badges

Comments

frianH · Accepted Answer · 2020-12-17 08:02:57Z

0

Hello in the app component.html

Please add

<router-outlet></router-outlet>

edited Dec 17, 2020 at 8:02

frianH

7,5916 gold badges26 silver badges49 bronze badges

answered Dec 17, 2020 at 7:30

Awabil George

3101 gold badge6 silver badges14 bronze badges

1 Comment

Jack Over a year ago

What about passing this received id value to a component in <router-outlet></router-outlet> ?

Collectives™ on Stack Overflow

Cannot navigate another component in Angular

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related