Reactive Component Updates with Angular Signals

Angular Signals provide a powerful mechanism for reactive data management, enabling fine-grained change detection and improved performance. This challenge asks you to implement a component that utilizes Angular Signals to dynamically update its display based on user input, demonstrating a fundamental understanding of signal creation, computation, and reactivity. Successfully completing this challenge will solidify your ability to build responsive and efficient Angular applications.

Problem Description

You are tasked with creating an Angular component that displays a formatted greeting message. The greeting should consist of a prefix ("Hello"), a name (provided by the user via an input field), and a suffix ("!"). The component should use Angular Signals to manage the name input and the computed greeting message.

What needs to be achieved:

Create an Angular component with an input field for the user to enter their name.
Store the user's input in an Angular Signal.
Compute a greeting signal that combines the prefix, name signal, and suffix.
Display the greeting signal in the component's template.
The displayed greeting should update immediately as the user types in the input field, without requiring explicit change detection triggers.

Key Requirements:

Use Angular Signals for both the input and the computed greeting.
The component must be a functional component.
The component should be self-contained and not rely on external services or data sources.
The component should handle empty input gracefully (displaying a default greeting if the name is empty).

Expected Behavior:

The component renders with an input field and a display area for the greeting.
As the user types in the input field, the name signal updates.
The greeting signal automatically updates based on the name signal.
The displayed greeting updates immediately to reflect the current value of the greeting signal.
If the input field is empty, the greeting should display "Hello !".

Edge Cases to Consider:

Empty input string: The greeting should default to "Hello !"
Very long input strings: The component should handle long strings without crashing or displaying unexpected behavior.

Examples

Example 1:

Input: Input field contains "Alice"
Output: "Hello Alice !"
Explanation: The name signal is "Alice", the greeting signal combines "Hello", "Alice", and "!"

Example 2:

Input: Input field is empty
Output: "Hello !"
Explanation: The name signal is an empty string, so the greeting defaults to "Hello !"

Example 3:

Input: Input field contains "Bob Smith"
Output: "Hello Bob Smith !"
Explanation: The name signal is "Bob Smith", the greeting signal combines "Hello", "Bob Smith", and "!"

Constraints

The component must be written in TypeScript.
The component should be relatively simple and focused on demonstrating signal usage. Avoid unnecessary complexity.
Performance is not a primary concern for this challenge, but the solution should not introduce any significant performance bottlenecks.
The component should be compatible with Angular 16 or later.

Notes

Consider using the signal() function from @angular/core to create your signals.
You can use the computed() function to derive the greeting signal from the name signal.
Remember that signals are reactive, so changes to their values will automatically trigger updates in any computed signals or template expressions that depend on them.
Focus on the reactivity aspect – the display should update immediately as the user types. Avoid manual change detection triggers.