Dynamic Product Details Page with Route Parameters

In single-page applications, it's common to display details for individual items, such as products, users, or articles. A crucial aspect of this is to be able to navigate to a specific item's detail page and have the URL reflect the item being viewed. This challenge focuses on implementing dynamic routing in Angular to achieve this.

Problem Description

Your task is to create an Angular application feature that allows users to view detailed information about products. You will need to configure Angular's routing to accept a product identifier as a route parameter. This identifier will be used to fetch and display the specific product's details.

Key Requirements:

1. Route Configuration: Define a route that accepts a dynamic segment for a product ID.
2. Component Implementation: Create an Angular component that will display the product details.
3. Parameter Extraction: Within the product details component, extract the product ID from the route.
4. Data Fetching (Simulated): Simulate fetching product data based on the extracted ID. For this challenge, you can use a predefined array of product objects.
5. Displaying Data: Render the fetched product details in the component's template.
6. Navigation: Implement a way to navigate from a list of products (simulated) to the individual product detail pages using the route parameter.

Expected Behavior:

• When a user clicks on a product from a list, they should be navigated to a URL like /products/123 (where 123 is the product ID).
• The product detail page should display information relevant to the product with ID 123.
• If a user directly enters a URL like /products/456 in the browser, the component should still load and display the details for product 456.
• If a product ID is not found in the simulated data, an appropriate message should be displayed.

Edge Cases:

• Handling invalid or non-existent product IDs.
• Ensuring that the product ID is correctly parsed as a number.

Examples

Example 1: Navigating to an existing product

Input: A user clicks on a "View Details" button for a product with ID 101.

URL Transition: /products -> /products/101

Expected Output (in Product Detail Component): The component displays the details for the product with ID 101.

Product Details
ID: 101
Name: Laptop Pro
Price: $1200
Description: High-performance laptop for professionals.

Example 2: Navigating to another existing product

Input: A user clicks on a "View Details" button for a product with ID 205.

URL Transition: /products -> /products/205

Expected Output (in Product Detail Component): The component displays the details for the product with ID 205.

Product Details
ID: 205
Name: Wireless Mouse
Price: $25
Description: Ergonomic wireless mouse with long battery life.

Example 3: Attempting to view a non-existent product

Input: A user directly enters the URL /products/999 into the browser, and product ID 999 does not exist in the simulated data.

URL Transition: Direct entry /products/999

Expected Output (in Product Detail Component): The component displays a "Product not found" message.

Product Details
Product with ID 999 not found.

Constraints

• You will use Angular version 12 or higher.
• The simulated product data will be an array of objects, each with at least id (number), name (string), price (number), and description (string) properties.
• You will simulate data fetching using a service or directly within the component for simplicity. No actual HTTP requests are required.
• The routing configuration should be handled within the app-routing.module.ts (or equivalent).
• The product detail component should be a standalone component or part of a module.

Notes

• Focus on correctly configuring your routes and extracting the parameter.
• The ActivatedRoute service in Angular is key to accessing route parameters.
• Consider using the snapshot or paramMap observable from ActivatedRoute to get the parameter. For this challenge, either approach is acceptable, but understanding both is beneficial.
• Think about how you would handle the case where the product ID might not be a valid number.