⚡ Understanding Angular Signals

Signals are Angular’s new way to manage reactive state. They let you create values that automatically update the UI when changed, without manual subscriptions or observables. This makes state management more predictable and efficient.

A signal is a special function that holds a value. When you read the signal (by calling it as a function), you get its current value. When you update the signal, Angular automatically tracks where it is used and updates only those parts of the UI that depend on it.

How to Use Signals

1. Create a signal:count = signal(0);
   This declares a reactive value with an initial value of 0.
2. Read the value:1
   Use in your template or this.count() in TypeScript to get the current value.
3. Update the value:this.count.set(newValue) or this.count.update(c => c + 1)
   Set a new value or update based on the previous value.

How This Example Works

• The counter value is stored in a signal called count. This makes the value reactive.
• When you click + or -, the signal is updated using update methods. The UI updates instantly wherever count() is used.
• Signals automatically track dependencies. If you use count() in multiple places, all will update when the value changes.
• No manual change detection, subscriptions, or RxJS is needed. Signals simplify reactivity and state management in Angular.
• Signals are ideal for local component state, but can also be composed for more complex scenarios.