Simplifying application states – Angular Signals

Controlling the state of a frontend application is one of the biggest challenges for a developer, as by nature, the interface is dynamic and needs to react to various user actions. Angular, with its stacks included philosophy, already had tools suitable for this task, and we studied in Chapters 5, Angular Services and the Singleton Pattern, and Chapter 9, Exploring Reactivity with RxJS, how to use these tools. However, despite being effective, the Angular community and team recognize that they are a bit complex for new developers and for simple cases of reactivity in frontend projects. To fill this gap, the Angular team introduced, from version 17 onward, a new element to the framework, called Signals.

According to the Angular documentation, a signal is a wrapper around a value that notifies consumers when that value changes. An analogy that you can associate with a signal is a cell in a spreadsheet. It can contain a value...