Angular Symbol Search: A Real-time Filtering Challenge
This challenge requires you to build a real-time search functionality for a list of symbols within an Angular application. Imagine a stock trading platform or a cryptocurrency dashboard where users need to quickly find specific symbols from a potentially large dataset. Efficiently filtering this data as the user types is crucial for a smooth user experience.
Problem Description
You need to create an Angular component that displays a list of financial symbols. This component should also feature an input field that allows users to search and filter these symbols in real-time. As the user types into the search input, the displayed list of symbols should update dynamically to show only those that match the entered text.
Key Requirements:
- Display Symbols: Render a list of predefined symbols (e.g., stock tickers, cryptocurrency names).
- Search Input: Implement an input field where the user can type their search query.
- Real-time Filtering: The list of displayed symbols must update immediately as the user types.
- Case-Insensitive Matching: The search should be case-insensitive. For example, searching for "aapl" should match "AAPL".
- Partial Matching: The search should match symbols that contain the search query anywhere within their name or ticker.
- Clear Button (Optional but Recommended): A button to clear the search input and reset the list to its original state.
Expected Behavior:
When the user types characters into the search input, the list of symbols should progressively narrow down. If the search input is cleared, the full list of symbols should reappear. If no symbols match the search query, the list should be empty or display a "No results found" message.
Edge Cases:
- Empty Search Input: The component should gracefully handle an empty search input by displaying the full list.
- No Matching Symbols: The component should clearly indicate when no symbols match the current search query.
- Special Characters in Search: While the primary focus is on alphanumeric symbols, consider how your filtering logic might handle or ignore special characters if they were to appear in a search query.
Examples
Example 1:
Input Data:
Symbols List: ['AAPL', 'GOOGL', 'MSFT', 'AMZN', 'TSLA', 'NVDA', 'META', 'IBM', 'INTC', 'AMD']
Search Input: 'a'
Output:
Displayed Symbols List: ['AAPL', 'AMZN', 'AMD']
Explanation: The search query 'a' is case-insensitive. It matches symbols that contain 'a' anywhere in their name: 'AAPL', 'AMZN', and 'AMD'.
Example 2:
Input Data:
Symbols List: ['AAPL', 'GOOGL', 'MSFT', 'AMZN', 'TSLA', 'NVDA', 'META', 'IBM', 'INTC', 'AMD']
Search Input: 'goo'
Output:
Displayed Symbols List: ['GOOGL']
Explanation: The search query 'goo' is case-insensitive and matches the partial string 'GOOGL'.
Example 3:
Input Data:
Symbols List: ['AAPL', 'GOOGL', 'MSFT', 'AMZN', 'TSLA', 'NVDA', 'META', 'IBM', 'INTC', 'AMD']
Search Input: 'xyz'
Output:
Displayed Symbols List: [] (or a "No results found" message)
Explanation: The search query 'xyz' does not match any of the provided symbols.
Constraints
- Initial Symbols Data: The initial list of symbols will be an array of strings, e.g.,
['AAPL', 'GOOGL', 'MSFT', ...]. - Search Query: The search query will be a string.
- Performance: The filtering should be performant enough for a list of up to 1000 symbols without noticeable lag, even on moderate hardware.
- Angular Version: Assume a recent stable version of Angular (e.g., v14+).
Notes
- Consider using Angular's reactive forms or template-driven forms for handling the input.
- Think about how you will manage the state of the search query and the filtered list.
- RxJS operators like
debounceTimeanddistinctUntilChangedcan be very helpful for optimizing real-time search behavior. - Your solution should be contained within a single Angular component.
- Focus on the core filtering logic and the interaction between the input and the displayed list.