Reactive Data Management with Observables in Angular

This challenge focuses on leveraging Angular's reactive programming capabilities using Observables. Observables are a powerful tool for handling asynchronous data streams and events, crucial for building dynamic and responsive Angular applications. Your task is to implement a component that manages user input and displays a transformed version of that input using Observables.

Problem Description

You need to create an Angular component that takes user input from a text field, converts the input to uppercase, and displays the uppercase version in a separate section of the component. The transformation should happen reactively – as the user types, the uppercase version should update in real-time. The component should also handle cases where the input field is empty, displaying a default message. Furthermore, you must implement a debouncing mechanism to avoid excessive updates while the user is typing rapidly.

Key Requirements:

• Input Field: A text input field where the user can enter text.
• Uppercase Transformation: An Observable that transforms the input text to uppercase.
• Reactive Display: The uppercase text should be displayed in the component's template and update reactively as the user types.
• Empty Input Handling: When the input field is empty, display a default message (e.g., "Enter text above").
• Debouncing: Implement a debouncing mechanism to limit the rate of uppercase transformations. The debouncing interval should be 500 milliseconds. This means the transformation should only occur 500ms after the user stops typing.

Expected Behavior:

1. When the component loads, the display area should show the default message "Enter text above."
2. As the user types in the input field, the uppercase version of the input should be displayed in the display area, but only after a 500ms delay since the last keystroke.
3. If the user clears the input field, the display area should revert to the default message.

Edge Cases to Consider:

• What happens if the user types very quickly? The debouncing should prevent excessive updates.
• What happens if the user deletes all the text in the input field? The default message should be displayed.
• Consider the performance implications of frequent updates. Debouncing helps mitigate this.

Examples

Example 1:

Input: User types "hello"
Output: Display area shows "HELLO" after 500ms of inactivity.
Explanation: The input "hello" is transformed to uppercase and displayed after the debouncing interval.

Example 2:

Input: User types "a very long sentence" then deletes everything.
Output: Display area shows "Enter text above"
Explanation: After deleting all text, the default message is displayed.

Example 3: (Edge Case)

Input: User types "a" then "b" then "c" very quickly (within 200ms of each other).
Output: Display area shows "C" after 500ms after the last "c" is typed.  The intermediate "A" and "B" are not displayed.
Explanation: The debouncing mechanism prevents the display from updating for each keystroke.

Constraints

• The solution must be written in TypeScript.
• The debouncing interval must be exactly 500 milliseconds.
• The solution must use Angular's built-in FormsModule for the input field.
• The component should be self-contained and not rely on external services unless absolutely necessary for demonstrating the core concept.
• The solution should be reasonably performant; avoid unnecessary computations or DOM manipulations.

Notes

• Consider using RxJS operators like debounceTime, map, and distinctUntilChanged to achieve the desired behavior.
• Think about how to handle the initial state of the component (displaying the default message).
• Focus on demonstrating the reactive nature of Observables and the effectiveness of debouncing.
• You don't need to create a full Angular project; a single component is sufficient. Assume the necessary Angular modules are already imported.