Angular Signals: Reactive Counter Component

Signals are a powerful new feature in Angular that provide a reactive and efficient way to manage component state. This challenge asks you to build a simple counter component using Angular signals, demonstrating how signals can be used to track and react to changes in data. This exercise will solidify your understanding of signal creation, reading, and updating, and how they automatically trigger change detection.

Problem Description

You need to create an Angular component that displays a counter value and provides buttons to increment and decrement the counter. The counter value should be managed using an Angular signal. When the counter value changes (due to button clicks), the component's template should automatically update to reflect the new value. The component should also display a message indicating whether the counter is positive, negative, or zero.

Key Requirements:

• Signal Creation: Create a signal to hold the counter value, initialized to 0.
• Increment/Decrement Buttons: Implement buttons that increment and decrement the counter value when clicked.
• Reactive Template: The component's template should display the current counter value and update automatically whenever the signal changes.
• Conditional Message: Display a message based on the counter value: "Positive" if the value is greater than 0, "Negative" if the value is less than 0, and "Zero" if the value is 0.
• Error Handling: While not strictly required, consider how you might handle potential errors or edge cases (e.g., preventing the counter from going below a certain minimum value).

Expected Behavior:

• The component should render initially with the counter value displayed as 0 and the message "Zero".
• Clicking the "Increment" button should increase the counter value by 1, updating the display accordingly.
• Clicking the "Decrement" button should decrease the counter value by 1, updating the display accordingly.
• The message displayed should change to "Positive" when the counter value is greater than 0, "Negative" when it's less than 0, and "Zero" when it's 0.
• The template should update immediately when the signal changes, without requiring manual change detection triggers.

Examples

Example 1:

Initial State: Counter Value = 0, Message = "Zero"
Action: User clicks "Increment" button.
Output: Counter Value = 1, Message = "Positive"
Explanation: The signal's value is incremented to 1, triggering an update in the template, which now displays "1" and "Positive".

Example 2:

Initial State: Counter Value = 5, Message = "Positive"
Action: User clicks "Decrement" button twice.
Output: Counter Value = 3, Message = "Positive"
Explanation: The signal's value is decremented twice, resulting in a value of 3. The template updates to display "3" and "Positive".

Example 3:

Initial State: Counter Value = -2, Message = "Negative"
Action: User clicks "Increment" button until the counter reaches 0.
Output: Counter Value = 0, Message = "Zero"
Explanation: The signal's value is incremented until it reaches 0. The template updates to display "0" and "Zero".

Constraints

• Angular Version: Use Angular 16 or later.
• Signals Only: The counter value must be managed using an Angular signal. Do not use traditional component properties or RxJS Observables for this specific value.
• Component Structure: Create a single Angular component for this challenge.
• Performance: The component should update efficiently and without noticeable lag. Signals are designed for this purpose.

Notes

• Consider using computed() signals to derive the message based on the counter value. This can help keep your component logic cleaner.
• Focus on demonstrating the reactive nature of signals. The template should update automatically without any manual change detection calls.
• This is a foundational exercise. Don't overcomplicate it with unnecessary features. The goal is to understand the basics of signal usage in Angular.
• Remember to import signal from @angular/core.