Angular Component Data Selectors: A Reactive Approach

This challenge focuses on building Angular component data selectors using RxJS Observables and the select operator. Data selectors are crucial for efficiently extracting and transforming data from complex observable streams within Angular components, promoting reactivity and code maintainability. You'll be creating a component that subscribes to an observable, applies a selector to it, and displays the resulting data.

Problem Description

You are tasked with creating an Angular component called DataDisplayComponent that receives an observable of numbers (numberObservable) as input. This component should use the RxJS select operator to extract only the even numbers from the observable stream, square them, and then display the squared even numbers in the component's template.

Key Requirements:

• The component must accept an @Input() property named numberObservable of type Observable<number>.
• The component must use the select operator to filter for even numbers, square them, and produce a new observable.
• The component's template must display the values emitted by the transformed observable.
• The component should handle the case where the input observable is empty or emits no even numbers gracefully (e.g., display a message like "No even numbers found").

Expected Behavior:

When the numberObservable emits a stream of numbers, the component should:

1. Filter the stream to include only even numbers.
2. Square each even number.
3. Display the squared even numbers in the template.
4. If the observable emits no even numbers, display "No even numbers found."

Edge Cases to Consider:

• The input numberObservable might be empty.
• The input numberObservable might emit only odd numbers.
• The input numberObservable might emit null or undefined values (handle these appropriately – consider filtering them out).

Examples

Example 1:

Input: numberObservable emits: [1, 2, 3, 4, 5, 6]
Output: Component displays: [4, 16, 36]
Explanation: The component filters for even numbers (2, 4, 6), squares them (4, 16, 36), and displays the results.

Example 2:

Input: numberObservable emits: [1, 3, 5, 7]
Output: Component displays: "No even numbers found."
Explanation: The component receives only odd numbers, so it displays the "No even numbers found" message.

Example 3:

Input: numberObservable emits: [1, 2, null, 4, undefined, 6]
Output: Component displays: [4, 16, 36]
Explanation: The component filters out null and undefined values, then processes the even numbers as in Example 1.

Constraints

• The component must be written in TypeScript.
• You must use the RxJS select operator.
• The component should be a functional component.
• The component should not perform any side effects within the selector itself (the selector should be a pure function).
• The component should handle potential errors gracefully (though explicit error handling is not required for this challenge, avoid crashing).

Notes

• Consider using the async pipe in your template to display the values from the observable.
• Think about how to handle the case where the input observable completes. For this challenge, you can assume the observable will not complete during the component's lifecycle.
• Focus on the clarity and efficiency of your selector logic. The selector should be concise and easy to understand.
• Remember to import necessary RxJS operators.