Angular Search Component Challenge: Filtering a Product List

This challenge focuses on building a reusable search component in Angular that filters a list of products based on user input. Implementing effective search functionality is a common requirement in web applications, and this exercise will test your understanding of Angular's data binding, event handling, and component interaction.

Problem Description

You are tasked with creating an Angular component that displays a list of products and allows users to filter this list by searching for a keyword. The component should:

1. Display a list of products: The component will receive an array of product objects as input. Each product object will have at least a name property (string) and a description property (string).
2. Provide a search input: A text input field should be provided for the user to enter their search query.
3. Filter the product list: As the user types in the search input, the displayed product list should be dynamically filtered. Only products whose name or description contain the search query (case-insensitive) should be shown.
4. Handle empty search: When the search input is empty, the component should display the entire original list of products.
5. Handle no results: If the search query doesn't match any products, display a message indicating that no results were found.

Expected Behavior:

• The component should be reusable and easily integrated into other Angular applications.
• The filtering should be performed efficiently, especially with large product lists.
• The UI should update smoothly and responsively as the user types.

Examples

Example 1:

Input: products = [
  { name: 'Laptop', description: 'Powerful laptop for work and gaming' },
  { name: 'Mouse', description: 'Ergonomic wireless mouse' },
  { name: 'Keyboard', description: 'Mechanical keyboard with RGB lighting' }
]
searchQuery = 'lap'
Output: [
  { name: 'Laptop', description: 'Powerful laptop for work and gaming' }
]
Explanation: Only the 'Laptop' product matches the search query 'lap' (case-insensitive).

Example 2:

Input: products = [
  { name: 'Laptop', description: 'Powerful laptop for work and gaming' },
  { name: 'Mouse', description: 'Ergonomic wireless mouse' },
  { name: 'Keyboard', description: 'Mechanical keyboard with RGB lighting' }
]
searchQuery = ''
Output: [
  { name: 'Laptop', description: 'Powerful laptop for work and gaming' },
  { name: 'Mouse', description: 'Ergonomic wireless mouse' },
  { name: 'Keyboard', description: 'Mechanical keyboard with RGB lighting' }
]
Explanation: An empty search query should display the entire product list.

Example 3:

Input: products = [
  { name: 'Laptop', description: 'Powerful laptop for work and gaming' },
  { name: 'Mouse', description: 'Ergonomic wireless mouse' },
  { name: 'Keyboard', description: 'Mechanical keyboard with RGB lighting' }
]
searchQuery = 'monitor'
Output: "No products found matching your search."
Explanation: No products have 'monitor' in their name or description.

Constraints

• Product List Size: The product list can contain up to 1000 products.
• Search Query Length: The search query will be a string with a maximum length of 50 characters.
• Performance: Filtering should be reasonably efficient. Avoid unnecessary DOM manipulations. The filtering logic should complete within 200ms for the given product list size.
• Case-Insensitive Search: The search should be case-insensitive.
• Input Type: products will be an array of objects, each with name (string) and description (string) properties. searchQuery will be a string.

Notes

• Consider using Angular's ngModel for two-way data binding between the search input and the component's property.
• Use array methods like filter() to efficiently filter the product list.
• Think about how to handle the "no results found" message gracefully.
• Focus on creating a clean, well-structured, and reusable Angular component.
• You don't need to create a full Angular application; just the component itself is sufficient. Assume the product data is already available.
• Error handling (e.g., invalid product data) is not required for this challenge.