Angular Product Filtering Application

This challenge focuses on implementing a filtering feature in an Angular application. You'll be building a component that displays a list of products and allows users to filter them based on a category selected from a dropdown. This is a common and essential feature in many web applications, demonstrating fundamental Angular concepts like data binding, event handling, and component interaction.

Problem Description

You are tasked with creating an Angular component that displays a list of products and provides a filtering mechanism based on product categories. The component should:

1. Display a list of products: The component should render a list of product objects. Each product object will have properties like name, category, and price.
2. Provide a category dropdown: A dropdown (select element) should be displayed, populated with the unique categories present in the product list.
3. Filter products based on selection: When a user selects a category from the dropdown, the displayed product list should update to show only products belonging to the selected category. If "All Categories" is selected, the entire product list should be displayed.
4. Handle initial load: The component should initially display all products before any category is selected.

Key Requirements:

• Use Angular's data binding features (interpolation, property binding, event binding) effectively.
• Ensure the dropdown options are dynamically generated from the product data.
• The filtering logic should be implemented within the component's TypeScript code.
• The UI should be responsive and provide a smooth user experience.

Expected Behavior:

• The component loads initially displaying all products.
• The category dropdown is populated with unique categories from the product list, including an "All Categories" option.
• Selecting a category from the dropdown filters the product list to show only products of that category.
• Selecting "All Categories" resets the filter and displays all products.

Edge Cases to Consider:

• Empty Product List: Handle the scenario where the product list is empty gracefully (e.g., display a message indicating no products are available).
• No Categories: Handle the scenario where the product list has no distinct categories (all products belong to the same category).
• Case Sensitivity: Consider whether the category filtering should be case-sensitive or case-insensitive. (For this challenge, case-insensitive is preferred).

Examples

Example 1:

Input: products = [
  { name: 'Laptop', category: 'Electronics', price: 1200 },
  { name: 'T-Shirt', category: 'Clothing', price: 25 },
  { name: 'Smartphone', category: 'Electronics', price: 800 },
  { name: 'Jeans', category: 'Clothing', price: 60 }
]
Output: Initially, all four products are displayed.  The dropdown contains "All Categories", "Electronics", and "Clothing".
Explanation: The component loads and displays the entire product list.

Example 2:

Input: products = [
  { name: 'Laptop', category: 'Electronics', price: 1200 },
  { name: 'Smartphone', category: 'Electronics', price: 800 }
]
Dropdown selection: 'Electronics'
Output: Only the 'Laptop' and 'Smartphone' products are displayed.
Explanation: The filter is applied, showing only products with the category 'Electronics'.

Example 3:

Input: products = []
Output: A message indicating "No products available" is displayed. The dropdown is empty (or contains only "All Categories").
Explanation: Handles the edge case of an empty product list.

Constraints

• Angular Version: Use Angular version 14 or higher.
• Component Structure: You are expected to create a single Angular component to handle the filtering logic and display.
• Data Source: The product data will be hardcoded within the component's TypeScript file as an array of product objects. No external API calls are required.
• Performance: The filtering operation should be efficient enough to handle a list of up to 100 products without noticeable performance degradation.
• UI Framework: Use standard Angular HTML elements for the dropdown and product list. No external UI libraries (e.g., Bootstrap, Material) are required.

Notes

• Consider using Angular's ngFor directive to iterate over the product list.
• Use Angular's ngModel directive for two-way data binding between the dropdown and the selected category.
• Think about how to efficiently update the displayed product list when the selected category changes.
• Focus on clean, readable, and maintainable code.
• The category property in the product object is a string.
• The "All Categories" option in the dropdown should have a value of an empty string ("").