Implementing Reactivity with Angular Signals

Angular is evolving, and with the introduction of Signals, developers now have a powerful new way to manage state and build reactive user interfaces. This challenge will guide you through implementing a basic reactive component using Angular Signals, demonstrating how to create, update, and consume signals effectively. Understanding Signals is crucial for building modern, performant Angular applications.

Problem Description

Your task is to create an Angular component that manages a counter. This component should allow users to increment and decrement the counter's value. You will utilize Angular Signals to manage the counter's state reactively.

Key Requirements:

1. Signal Creation: Create a signal to hold the counter's current value. This signal should be initialized to 0.
2. Component Template:
   • Display the current value of the counter.
   • Provide two buttons: one to increment the counter and one to decrement it.
3. Signal Updates:
   • When the "Increment" button is clicked, the counter signal should be updated to increase its value by 1.
   • When the "Decrement" button is clicked, the counter signal should be updated to decrease its value by 1.
4. Reactivity: The displayed counter value in the template should automatically update whenever the signal's value changes due to button clicks.

Expected Behavior:

The component should initially display "Counter: 0". Clicking the increment button should increase the displayed number, and clicking the decrement button should decrease it. The UI should update seamlessly without manual DOM manipulation.

Edge Cases:

• Consider if there are any implicit limits on the counter's value. For this challenge, assume no explicit upper or lower bounds, but be mindful of potential integer overflow in real-world scenarios (though not a focus here).

Examples

Example 1: Initial State

Input: (Component is loaded)
Output:
Counter: 0
[Increment Button] [Decrement Button]

Explanation: When the component loads, the counter signal is initialized to 0, and this value is displayed.

Example 2: After Incrementing

Input: (User clicks the Increment button once)
Output:
Counter: 1
[Increment Button] [Decrement Button]

Explanation: Clicking "Increment" updates the counter signal to 1, and the template automatically reflects this change.

Example 3: After Decrementing

Input: (User clicks the Decrement button once from a value of 0)
Output:
Counter: -1
[Increment Button] [Decrement Button]

Explanation: Clicking "Decrement" updates the counter signal to -1, and the template reflects the new value.

Constraints

• The solution must be implemented in TypeScript within an Angular component.
• You must use Angular's Signals API for state management of the counter.
• Avoid using ChangeDetectionStrategy.OnPush or manually calling markForCheck if you want to fully leverage the declarative nature of Signals for rendering updates.
• The component should be self-contained and demonstrate the core functionality.

Notes

• You'll need to import signal and Signal from @angular/core.
• In your component class, declare a property of type Signal<number> and initialize it using signal(0).
• In your template, access the signal's value using its () syntax (e.g., {{ counter() }}).
• Event handlers for the buttons will call methods that update the signal's value using its .set() or .update() methods. The .update() method is often preferred for operations that depend on the current signal value.