Angular Signals Study Guide

A new primitive type called “Signal” has been introduced in Angular v16. It’s designed to store a value similar to a regular variable. When the Signal’s value changes, it notifies the interested consumers. Signals store both primitive data types and objects.

In case we use the OnPush change detection in a component and it contains a Signal in its template, Angular tracks the Signal as a dependency for the component and marks the component for check if the Signal’s value changes. In Angular v17 this is going to change, it’s going to be possible to use Signal-based per-component change detection without zone.js.

In this article, I share all the resources you'll need to master Angular Signals.

📰Angular & signals. Everything you need to know

Why do we need Signals? Robin Goetz explains what problems they address, how they fit into the Angular story and how they work. He also elaborates on what their biggest advantages are over the BehaviorSubjects of RxJs:

• Signals has glitch-free execution, and
• Compared to RxJs, Angular Signals is simpler and therefore easier to learn.

📰Converting Observables to Signals in Angular: What You Need to Know and Converting Signals to Observables in Angular: What You Need to Know

In his articles, Netanel Basal inspects how we can convert Observables to Signals and Signals to Observables using the new rxjs-interop package.

📰Angular Signals & Your Architecture: 5 Options

Manfred Steyer explores the impact of Signals on the architecture of Angular applications. He showcases five different options:

• Signals in Component
• Move Signals to a Service
• Information Hiding With Services
• Using a Store and the Redux Pattern
• Hiding the Store Behind a Facade

📰Official Angular documentation and RFCs

I believe that next to checking out the awesome resources produced by the Angular community, it is also useful to take a look at the official materials:

• Angular Signals Guide
• RxJS Interop

RFCs:

• RFC: Angular Signals
• Sub-RFC 1: Signals for Angular Reactivity
• Sub-RFC 2: Signal APIs
• Sub-RFC 3: Signal-based Components
• Sub-RFC 4: Observable and Signal Interoperability

📰Demystifying the push & pull nature of Angular Signals

Tomas Trajan takes a deep dive into Angular Signals and how it can be understood using the push & pull concepts.

📰Signals in Angular: The Future of Change Detection

Manfred Steyer compares the current Zone.js-based change detection to the new Signal based approach.

📷Getting started with Angular Signals

In their presentation at Google I/O, Emma Twersky and Alex Rickabaugh developed a Signals-based Angular application. While it is a quite complex example, you’ll learn a lot from it.

📰Signals in Angular – How to Write More Reactive Code

Deborah Kurata explains what Signals are, and how to create, read and update them. She also covers the concept of computed Signals and effects.

👨‍💻About the author

My name is Gergely Szerovay, I work as a frontend development chapter lead. Teaching (and learning) Angular is one of my passions. I consume content related to Angular on a daily basis — articles, podcasts, conference talks, you name it.

I created the Angular Addict Newsletter so that I can send you the best resources I come across each month. Whether you are a seasoned Angular Addict or a beginner, I got you covered.

Next to the newsletter, I also have a publication called — you guessed it — Angular Addicts. It is a collection of the resources I find most informative and interesting. Let me know if you would like to be included as a writer.

Let’s learn Angular together! Subscribe here 🔥

Follow me on Medium, Dev.to, Twitter or LinkedIn to learn more about Angular!