Angular Autocomplete Component

Autocomplete is a common and useful feature in many applications, providing users with suggestions as they type. This challenge asks you to implement a basic autocomplete component in Angular that displays suggestions based on a predefined list of options. This will test your understanding of Angular's reactive forms, event handling, and template rendering.

Problem Description

You need to create an Angular component that provides an autocomplete input field. As the user types in the input field, the component should filter a predefined list of strings and display a dropdown list of matching suggestions. When the user selects a suggestion from the dropdown, the input field should be populated with the selected value. The component should handle cases where there are no matches, and gracefully display an empty dropdown.

Key Requirements:

• Input Field: A text input field where the user can type.
• Suggestion List: A dropdown list displaying suggestions that match the input.
• Filtering: The suggestion list should be dynamically filtered based on the input text.
• Selection: Selecting a suggestion from the dropdown should update the input field with the selected value.
• No Matches: The dropdown should be empty when there are no matching suggestions.
• Clear Input: The input field should be cleared when the dropdown is closed (e.g., by clicking outside the dropdown).

Expected Behavior:

1. When the component loads, the input field is empty, and the dropdown is hidden.
2. As the user types in the input field, the component filters the predefined list of options.
3. The dropdown list is displayed, showing only the options that match the input.
4. If no options match the input, the dropdown list is hidden.
5. When the user clicks on a suggestion in the dropdown, the input field is populated with the selected suggestion, and the dropdown is hidden.
6. Clicking outside the dropdown should close it.

Edge Cases to Consider:

• Empty input string: The dropdown should be empty.
• No matching suggestions: The dropdown should be empty.
• Large list of suggestions: Ensure filtering performance is reasonable.
• Special characters in the input string: Handle special characters correctly in the filtering logic.

Examples

Example 1:

Input: options = ["apple", "banana", "cherry", "date"], input = "ap"
Output: Dropdown displays: ["apple"]
Explanation: The input "ap" matches "apple". "banana", "cherry", and "date" do not.

Example 2:

Input: options = ["apple", "banana", "cherry", "date"], input = "grape"
Output: Dropdown is hidden (empty).
Explanation: No options match the input "grape".

Example 3:

Input: options = ["apple", "banana", "cherry", "date"], input = ""
Output: Dropdown is hidden (empty).
Explanation: An empty input string should result in an empty dropdown.

Constraints

• Options List Size: The options list will contain a maximum of 100 strings.
• String Length: Each string in the options list will have a maximum length of 50 characters.
• Input String Length: The input string will have a maximum length of 100 characters.
• Performance: Filtering should be reasonably efficient, completing within 200ms for the given constraints.
• Angular Version: Use Angular 14 or later.

Notes

• You can use Angular's reactive forms for the input field.
• Consider using Observable and pipe for filtering the suggestions.
• You'll need to handle the visibility of the dropdown list.
• Think about how to close the dropdown when the user clicks outside of it. You can use a click outside listener.
• Focus on creating a functional and well-structured component. Styling is not a primary concern for this challenge.
• The predefined list of options should be hardcoded within the component for simplicity. No external API calls are required.