#How can I pass the correct data to product-page

5 messages · Page 1 of 1 (latest)

modern quiver
#

-category-page
-product-list
-product-page
-product-item

I am fetching all products from my service to category-page and from there I pass it to product-list and product-item. However, since product-page is not included in the templates of product-list, I have difficulty in redirecting the data clicked on it.

I change the url like this in product-item, but how can I get the information of the product clicked here?

  onClickProduct(event: Event) {
    this.router.navigate([
      '/collections',
      `${this.categoryTitle}`,
      'products',
      this.product.title?.toLocaleLowerCase().split(' ').join('-'),
    ]);
  }
summer willow
#

Pass the unique identifier of the product in the URL, instead of (or in addition to) passing its slugified title. Then in the product-page component, use the ActivatedRoute service to get this ID from the path parameter. And use it to get the product.

modern quiver
willow rapids
#

Then your backend needs to be able to give you a product given its Slug

summer willow
#

Or, as I suggested in my answer, you pass the unique identifier in addition to the slug. Like when you go to a question on stackoverflow for example, the URL looks like https://stackoverflow.com/questions/78948622/typescript-guarding-inferred-argument-noinfer. 78948622 is the ID of the question, and typescript-guarding-inferred-argument-noinfer is the slug (which is actually there only to have a more readable URL)