Angular route param is empty

Question

I have a routerlink that looks like this:

  <li class="list-group-item d-flex justify-content-between align-content-center" *ngFor = "let union of activeUnions" [routerLink] = "['union',union.id]">

Which is routing using the route:

const routes: Routes = [
  {
    path: '',
    component: IndexPage
  },
  {
    path:"new",
    component:NewPage
  },
  {
    path:"union/:id",
    component:UnionPage
  }
];

This is sending me to the required component but when i try to get the id like such


  ngOnInit() {
    let id = this.$common.$route.snapshot.paramMap
    console.log(id);
  }

I am getting an empty object instead of an object containing the id from the url, whats is wrong?

You should probably try to provide a minimal reproducible example that clearly demonstrates the issue you are facing. Ideally, someone could drop the code into a standalone IDE like Stackblitz (link here!) and immediately get to work solving the problem without first needing to re-create it. There should be no typos, unrelated errors, or undeclared types or values. — smtaha512
– smtaha512, Commented Jan 15, 2022 at 17:51

Juan Vicente Berzosa Tejero · Accepted Answer · 2022-01-15 18:30:52Z

1

See if you can get the desired id with this:

...
import { ActivatedRoute } from '@angular/router';
...

constructor(
   ...
   private activatedRoute: ActivatedRoute
   ...
) {}


 ngOnInit(): void {
    const id = Number(this.activatedRoute.snapshot.paramMap.get('id'));
    console.log(id);
  }

edited Jan 15, 2022 at 18:30

answered Jan 15, 2022 at 18:24

Juan Vicente Berzosa Tejero

3,0422 gold badges8 silver badges16 bronze badges

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

2 Comments

Osakr Over a year ago

This must work, but remember that this captures the value of ID just once at the ngOnInit. If the id changes while the component is active, the value in the component won't change

Noble Eugene Over a year ago

This worked, this was what i was doing but the activatedRoute was in a common service that was imported together, why did this hinder it from working?

Collectives™ on Stack Overflow

Angular route param is empty

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related