Angular Typeahead Search Component

This challenge asks you to build a basic typeahead search component in Angular. Typeahead functionality enhances user experience by providing real-time suggestions as the user types, significantly improving search efficiency and reducing errors. This is a common feature in many web applications, from e-commerce sites to document management systems.

Problem Description

You need to create an Angular component that implements a typeahead search feature. The component should:

Display an input field: This field will be where the user enters their search query.
Fetch suggestions: As the user types in the input field, the component should asynchronously fetch suggestions from a predefined list of data. For this challenge, the data will be a hardcoded array of strings.
Display suggestions: The component should display a dropdown list of suggestions below the input field. These suggestions should update dynamically as the user types.
Highlight matching characters: The suggestions should highlight the portion of the suggestion that matches the user's input.
Select a suggestion: When the user clicks on a suggestion, the input field should be populated with the selected suggestion.
Handle empty results: If no suggestions match the user's input, the dropdown list should be hidden.

Key Requirements:

Use Angular's reactive forms for the input field.
Implement debouncing to avoid excessive API calls (or in this case, unnecessary filtering of the data).
Use Angular's EventEmitter to emit the selected suggestion to the parent component.
The component should be reusable and accept a label for the input field as an @Input().

Expected Behavior:

The input field should be cleared when a suggestion is selected.
The dropdown list should only appear when there are matching suggestions.
The dropdown list should disappear when the input field loses focus.
The component should handle edge cases gracefully, such as an empty data source.

Edge Cases to Consider:

Empty data source: What happens if the data source is empty?
No matching suggestions: What happens when the user types something that doesn't match any suggestions?
Large data source: While we're using a small hardcoded array, consider how the component would perform with a larger dataset. (Debouncing is key here).
User rapidly typing: Ensure the debouncing prevents excessive updates.

Examples

Example 1:

Input: data = ["apple", "banana", "cherry", "date", "elderberry"], input = "ap"
Output: Dropdown list displaying: "apple", "elderberry" (with "ap" highlighted in each)
Explanation: The component filters the data to find suggestions that start with "ap" and displays them.

Example 2:

Input: data = ["apple", "banana", "cherry", "date", "elderberry"], input = "grape"
Output: Dropdown list is hidden.
Explanation: No suggestions match the input "grape", so the dropdown is hidden.

Example 3:

Input: data = ["apple", "banana", "cherry", "date", "elderberry"], input = ""
Output: Dropdown list is hidden.
Explanation: The input is empty, so no suggestions are displayed.

Constraints

Data Source Size: The data source will be a hardcoded array of strings with a maximum size of 50.
Debounce Delay: Implement a debounce delay of 300 milliseconds.
Angular Version: Use Angular version 14 or higher.
Performance: The component should be responsive and avoid blocking the main thread. Debouncing is crucial for this.
Input Type: The input field should be of type text.

Notes

Consider using RxJS operators like debounceTime and distinctUntilChanged for efficient handling of user input.
You can use Angular's *ngFor directive to iterate over the suggestions.
Focus on creating a clean and well-structured component.
Styling is not required for this challenge; focus on the functionality.
The hardcoded data source is for simplicity; in a real-world application, you would fetch data from an API.
Think about how to efficiently highlight the matching characters within each suggestion. String manipulation techniques will be helpful.