Dynamic Data Display with Angular Query Parameters

This challenge focuses on building a simple Angular component that dynamically displays data based on query parameters passed in the URL. Understanding how to handle query parameters is crucial for creating flexible and user-friendly applications, allowing for filtering, sorting, and other dynamic behaviors without requiring full page reloads. You'll be building a component that fetches and displays a list of items, filtering them based on a 'category' query parameter.

Problem Description

You need to create an Angular component called CategoryListComponent that displays a list of items. The items are hardcoded within the component (no API calls are required for this challenge). The component should filter the items based on a category query parameter passed in the URL.

What needs to be achieved:

1. Component Setup: Create a new Angular component named CategoryListComponent.
2. Item Data: Define an array of item objects within the component. Each item should have a name (string) and a category (string) property.
3. Query Parameter Handling: Use Angular's ActivatedRoute service to read the category query parameter from the URL.
4. Filtering Logic: Filter the item array based on the category query parameter. If the category parameter is present, only display items that match that category. If the category parameter is not present, display all items.
5. Display: Display the filtered list of items in the component's template. Each item should be displayed with its name.

Key Requirements:

• The component must be able to read the category query parameter from the URL.
• The component must filter the item data based on the query parameter.
• The component must display the filtered data in the template.
• The component should handle the case where the query parameter is not present.

Expected Behavior:

• When the component loads, it should read the category query parameter from the URL.
• If the category parameter is present (e.g., ?category=electronics), only items with the matching category should be displayed.
• If the category parameter is not present (e.g., /category-list), all items should be displayed.
• Changing the query parameter in the URL should dynamically update the displayed list.

Edge Cases to Consider:

• Empty Query Parameter: What happens if the query parameter is present but empty (e.g., ?category=)? Treat this as if the parameter is not present and display all items.
• Invalid Category: What happens if the query parameter has a value that doesn't match any of the item categories? Display all items.
• Case Sensitivity: The category matching should be case-insensitive.

Examples

Example 1:

Input: URL: /category-list
Output: All items are displayed.
Explanation: No category parameter is present, so all items are shown.

Example 2:

Input: URL: /category-list?category=electronics
Output: Only items with category 'electronics' are displayed.
Explanation: The category parameter is 'electronics', so only electronics items are filtered and shown.

Example 3:

Input: URL: /category-list?category=clothing
Output: Only items with category 'clothing' are displayed.
Explanation: The category parameter is 'clothing', so only clothing items are filtered and shown.

Example 4:

Input: URL: /category-list?category=
Output: All items are displayed.
Explanation: The category parameter is present but empty, so all items are shown.

Constraints

• Angular Version: Angular 14 or higher.
• Data Size: The items array should contain a maximum of 20 items.
• Performance: The filtering logic should be efficient enough to handle the given data size without noticeable delays.
• Input Format: The category query parameter should always be a string.

Notes

• Use the ActivatedRoute service to access the query parameters.
• Consider using a pipe or a method within the component to perform the filtering logic.
• Remember to handle the case where the query parameter is not present.
• Ensure your category matching is case-insensitive.
• Focus on the core functionality of reading and filtering based on the query parameter. Styling is not required for this challenge.