Angular Symbol Search Component

This challenge asks you to implement a reusable Angular component that allows users to search for symbols (e.g., stock tickers, cryptocurrency symbols, chemical elements) within a predefined list. This is a common feature in financial applications, data dashboards, and scientific tools, enabling users to quickly find and select relevant symbols from a large dataset.

Problem Description

You need to create an Angular component called SymbolSearchComponent that provides a search input field and a dynamically updated list of matching symbols. The component should:

1. Accept an Input: The component should accept an input property called symbols which is an array of strings representing the available symbols.
2. Search Functionality: As the user types in the search input, the component should filter the symbols array and display only the symbols that match the search term (case-insensitive).
3. Display Results: The matching symbols should be displayed in an unordered list (<ul>).
4. Selection Handling: When a user clicks on a symbol in the list, the component should emit an event called symbolSelected with the selected symbol as its payload.
5. No Results Handling: If no symbols match the search term, display a message indicating "No symbols found."
6. Clear Input: When the search input is cleared, the list should display all symbols.

Key Requirements:

• The component should be reusable and easily integrated into other Angular applications.
• The search should be performed efficiently, especially when dealing with a large number of symbols.
• The UI should be responsive and provide a good user experience.

Expected Behavior:

• When the component is initialized, it should display all symbols from the symbols input array.
• As the user types in the search input, the list of displayed symbols should update in real-time to show only the matching symbols.
• Clicking on a symbol in the list should trigger the symbolSelected event with the selected symbol.
• If the search input is empty, the list should display all symbols.
• If no symbols match the search term, a "No symbols found" message should be displayed.

Edge Cases to Consider:

• Empty symbols input array.
• Very large symbols array (performance).
• Special characters in the search term.
• Case sensitivity (should be case-insensitive).

Examples

Example 1:

Input: symbols = ["AAPL", "MSFT", "GOOG", "AMZN", "TSLA"]
Search Term: "a"
Output: <ul><li>AAPL</li><li>AMZN</li></ul>
Explanation: The list displays only "AAPL" and "AMZN" because they contain the letter "a" (case-insensitive).

Example 2:

Input: symbols = ["AAPL", "MSFT", "GOOG", "AMZN", "TSLA"]
Search Term: "GOOG"
Output: <ul><li>GOOG</li></ul>
Explanation: The list displays only "GOOG" because it exactly matches the search term.

Example 3:

Input: symbols = ["AAPL", "MSFT", "GOOG", "AMZN", "TSLA"]
Search Term: "XYZ"
Output: <p>No symbols found.</p>
Explanation: No symbols in the list contain "XYZ", so the "No symbols found" message is displayed.

Constraints

• The component should be written in TypeScript.
• The component should use Angular's built-in features for data binding and event handling.
• The search functionality should be implemented efficiently to handle arrays with up to 1000 symbols without noticeable performance degradation.
• The component should be self-contained and not rely on external libraries beyond Angular itself.

Notes

• Consider using Angular's FormsModule for two-way data binding between the search input and the component's internal state.
• Think about how to optimize the filtering process for large datasets. Using Array.filter() is a good starting point, but consider alternatives if performance becomes an issue.
• Pay attention to the user experience. Provide clear feedback to the user about the search results.
• The symbolSelected event should be an EventEmitter<string>.