DEV Community

Angular Signals: From Zero to Hero

Soumaya Erradi on November 03, 2024

Reactive programming has become a central paradigm in modern frontend development, with frameworks like Angular relying heavily on observables, eve...

Read full post

Kishore Andra • Nov 4 • Edited

Easy to understand 😀, thanks for writing one 🙏

But the computed signals use computed method as in docs is it 🤔

const count: WritableSignal<number> = signal(0); const doubleCount: Signal<number> = computed(() => count() * 2);

Soumaya Erradi • Nov 4 • Edited

Using computed like this is key for creating signals that depend on other signals, allowing Angular to handle dependencies and updates automatically.

Kishore Andra • Nov 4 • Edited

Thanks, apologies but to me I feel that this post seems to be articulated by AI ... well it is perfectly alright but hopefully after reviewed by you or any human before 🚀😊

Artur Szwagrzak • Dec 3 • Edited

I see small inconsistency in describing difference between derived and computed signals.

You can also create computed signals, which act similarly to derived signals but are used when you need to perform more complex calculations.

According to Angular documentation link:

Computed signal are read-only signals that derive their value from other signals. You define computed signals using the computed function and specifying a derivation.

We do not distinguish between these two types of signals, name derived isn't used in the documentation. More important is the difference between WritableSignals and Signals (no-writable).

Soumaya Erradi • Dec 4

Thanks for your comment! "derived signals" is a general term for signals that depend on others, and "computed signals" are Angular's specific way of creating them using the computed function.

The documentation doesn’t use the term "derived signals," but it describes the same idea. I used it to make the difference between writable (signal) and read-only (computed) signals clearer.

Hope that helps!