Hone logo
Hone
Problems

Angular Navigation Mastery

This challenge focuses on implementing robust and user-friendly navigation within an Angular application. You will build a multi-page application with clear routing, allowing users to seamlessly move between different sections of your application. This is a fundamental skill for any web developer working with Angular, enabling the creation of dynamic and engaging user experiences.

Problem Description

Your task is to create an Angular application that simulates a small blog or product catalog. The application should consist of at least three distinct pages:

  1. Home Page: A landing page for the application.
  2. About Page: Information about the application or company.
  3. Product/Article List Page: Displays a list of items (e.g., blog posts, products).
  4. Product/Article Detail Page: Displays the details of a specific item selected from the list page.

You will need to configure Angular's RouterModule to handle navigation between these pages. The application should also include navigation links (e.g., in a header or sidebar) that allow users to easily switch between pages.

Key Requirements:

  • Routing Configuration: Define routes for each of the required pages using RouterModule.forRoot().
  • Navigation Links: Implement routerLink directives in your templates for easy navigation.
  • Dynamic Routing: Implement a route for the detail page that accepts a dynamic parameter (e.g., an item ID) to display specific content.
  • Data Display:
    • The list page should display a simple list of dummy items (e.g., titles, short descriptions).
    • The detail page should display the full details of a selected item. You can use hardcoded data for this exercise.
  • Component Structure: Create separate Angular components for each page.
  • App Module: Ensure your AppModule imports AppRoutingModule (or configure routes directly if preferred).

Expected Behavior:

  • When the application loads, the Home Page should be displayed.
  • Clicking on navigation links should update the URL in the browser and render the corresponding component.
  • On the Product/Article List Page, clicking on an item should navigate to the corresponding Product/Article Detail Page, displaying the correct item's information based on its ID.
  • The application should handle invalid routes gracefully (e.g., display a 404 component, though this is optional for this core challenge).

Edge Cases:

  • Navigating directly to a detail page URL with an invalid or missing ID.
  • Ensuring the correct data is displayed when navigating between different detail items.

Examples

Example 1: Navigating to the About Page

  • Input: User clicks on a "About" link in the navigation.
  • Output:
    • The URL in the browser changes from / to /about.
    • The AboutComponent is rendered.
  • Explanation: The routerLink="/about" directive on the "About" link triggers Angular's router to match the /about route and display its associated component.

Example 2: Navigating to a Product Detail Page

  • Input:
    • User is on the Product List Page (/products).
    • The list displays items with IDs: 1, 2, 3.
    • User clicks on the item with ID "2".
  • Output:
    • The URL in the browser changes from /products to /products/2.
    • The ProductDetailComponent is rendered and displays the details for product with ID "2".
  • Explanation: The routerLink="/products/{{item.id}}" on the product item triggers navigation to a dynamic route. The router extracts the id from the URL parameter and passes it to the ProductDetailComponent.

Example 3: Handling an Invalid Product ID

  • Input: User directly navigates to /products/999 where no product with ID 999 exists.
  • Output: (Optional, but good practice)
    • A "Product not found" message is displayed, or a default component is shown.
    • The URL remains /products/999.
  • Explanation: If you implement a fallback route or specific logic within your ProductDetailComponent to handle non-existent IDs, this scenario would be addressed. For this core challenge, focus on correctly displaying existing product details.

Constraints

  • Angular Version: Use Angular 14 or later.
  • TypeScript: All component logic and routing configuration must be in TypeScript.
  • Dummy Data: For product/article lists and details, use hardcoded arrays or objects within your components. No external data fetching or services are required for this challenge.
  • File Structure: Maintain a logical and organized file structure for your components and routing modules.
  • Readability: Code should be well-commented and follow standard Angular best practices.

Notes

  • You will need to create an AppRoutingModule or configure your routes directly within app.module.ts.
  • Remember to use the <router-outlet></router-outlet> directive in your AppComponent template to render routed components.
  • The ActivatedRoute service is crucial for accessing route parameters (like the product ID) in your ProductDetailComponent.
  • Consider how you will pass data to the ProductDetailComponent. Route parameters are a common and effective method for this scenario.
  • For the product/article list and detail pages, you can create simple placeholder components. The focus is on the routing mechanism itself.
Loading editor...
typescript