Reactive Data Management with RxJS in Angular: A Filtering and Transformation Challenge

This challenge focuses on utilizing RxJS operators within an Angular component to manage and transform a stream of data. You'll be building a component that filters and transforms a list of product names based on user input, demonstrating practical application of RxJS for reactive data handling in Angular applications. This is a core skill for building dynamic and responsive user interfaces.

Problem Description

You are tasked with creating an Angular component that displays a list of product names. The component should have an input field where the user can enter a search term. The displayed list should dynamically update to show only the product names that contain the search term (case-insensitive). Additionally, the displayed names should be transformed to uppercase.

What needs to be achieved:

Create an Angular component with a text input field and a list of product names.
Implement a search functionality using RxJS operators.
Filter the product names based on the search term entered by the user.
Transform the filtered product names to uppercase.
Display the filtered and transformed product names in the list.

Key Requirements:

Use RxJS operators (fromEvent, debounceTime, distinctUntilChanged, map, filter) to implement the search functionality.
The search should be debounced to avoid excessive filtering on every keystroke. A debounce time of 300ms is recommended.
Only emit a new value when the search term has changed.
The filtering should be case-insensitive.
The transformation to uppercase should be applied before displaying the names.
The component should be well-structured and maintainable.

Expected Behavior:

When the component loads, an empty list should be displayed.
As the user types in the search input, the list should update after a 300ms delay.
The list should only display product names that contain the search term (case-insensitive).
The displayed product names should be in uppercase.
If the search term is empty, the list should display all product names (transformed to uppercase).

Edge Cases to Consider:

Empty search term: Should display all product names (uppercase).
Case sensitivity: Filtering should be case-insensitive.
Rapid typing: Debouncing should prevent excessive filtering.
No matching products: Should display an empty list.

Examples

Example 1:

Input: products = ["apple", "banana", "orange", "grape"], search term = "ap"
Output: ["APPLE", "BANANA", "GRAPE"]
Explanation: The list is filtered to include "apple", "banana", and "grape" because they contain "ap".  Then, each name is transformed to uppercase.

Example 2:

Input: products = ["apple", "banana", "orange", "grape"], search term = "ORANGE"
Output: ["ORANGE"]
Explanation: The list is filtered to include "orange" (case-insensitive). Then, it's transformed to uppercase.

Example 3:

Input: products = ["apple", "banana", "orange", "grape"], search term = ""
Output: ["APPLE", "BANANA", "ORANGE", "GRAPE"]
Explanation: The search term is empty, so all product names are displayed after being transformed to uppercase.

Constraints

Debounce Time: The debounce time should be 300ms.
Input Type: The search term should be treated as a string.
Performance: The filtering and transformation should be efficient enough to handle a list of up to 100 product names without noticeable lag.
Angular Version: Assume Angular 14 or later.

Notes

Consider using fromEvent to listen to the input field's keyup event.
debounceTime is crucial for performance.
distinctUntilChanged can help avoid unnecessary filtering if the search term hasn't changed.
map is used for transforming the data.
filter is used for selecting the desired data.
Focus on creating a clean and readable Angular component. You don't need to create a full application, just the component and its associated logic. You can mock the product data.