Html Question posted in
Some basic documentation can be found here.

Html – Cant get id from route parameters

I have this type of <a>

<a class="card_img"  [href]="'/Detail/' + food.id">

Route looks like:

  {
    path: "Detail/:{Id}",
    component: DetailInfoComponent
  }

So, problem: I can`t get Id, i used this method

this.route.params.subscribe(params => {
     this.foodID = params['Id'];
   });

And foodID is undefined. Wrere is my fault and how i can get ID correctly?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    {
    path: "Detail/:Id",
    component: DetailInfoComponent
}

    Route path must be without "{}"


  2. 0

    You can get the id from the route using a snapshot or an observable. I prefer observables, because the URL can sometimes change programmatically and it’s nice if the template/view updates as well.

    Your routing file must look like this (without the curly braces):

     {
    path: "Detail/:Id",
    component: DetailInfoComponent
 }

    Since you want to wait for data bindings to be ready, you can access it in the ngOnInit lifecycle hook.

    
  // On top of your Class - For unsubscribing from observables automatically - Injection context
  private destroyRef = inject(DestroyRef);

  ngOnInit() {
    this.route.params.pipe(
      takeUntilDestroyed(this.destroyRef)
    ).subscribe(params => {
     console.log(params);
     this.foodID = params['Id'];
   });

  }

    Also added a console.log to make sure you’re getting the value, and nothing else is going on with async operations.

    To get it using a snapshot, you can do (make sure you replace the 0 with whatever the index you expect the id to be:

    const foodID = this.route.snapshot.url[0]!.path;

    Keep in mind that file names and folders aren’t case-sensitive on every platform. Personally i only use lowercase in Apps, but that might be a personal preference.

    Also, instead of using [href], use [routerLink] to use Angular’s router properly. For example.

    <a class="card_img" [routerLink]="['/Detail/', food.id]">

    This wil push and pop the navigation stack as expected. Make sure to include the RouterModule though in your imports. [routerLink] exxpects either a string, or an array of path elements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search