Reactivity and Signals in Angular

Course details

Signals are a reactive primitive in the Angular framework that can be used to optimize performance in Angular applications. The Signals API can be leveraged to build reliable reactive systems that respond quickly to user inputs and application state changes. In this course, instructor Lara Newsom covers what Signals are and why they are such an important component of the Angular framework. Explore each function in the Signals API and learn how and when to implement each. Along the way, Lara outlines common pitfalls and any limitations that may exist with each type of function within the Signals API. By the end of this course, you’ll be prepared to implement the various features of the Signals API in your own application.

Learning objectives
Define what Signals are and why they were introduced to the Angular framework.
Explain how Signals are implemented in Angular to optimize reactivity within an application.
Compare the different features within the Angular Signals API and choose the appropriate implementation to create a reliable reactive system within your application.

Concepts

0. Introduction

01 - Boost application performance with Angular Signals
02 - What you should know
03 - How to use Codespaces with this course

1. What Are Signals

04 - What are signals
05 - Where did signals come from
06 - What is reactivity
07 - The problems with zone-based reactivity
08 - Fine-grained reactivity and zoneless Angular

2. Introduction to the Angular Signals API

09 - Introducing signals
10 - Angular writable signals
11 - Angular computed signals
12 - Using writable and computed signals together

3. Side Effects, Async Events, and Dependent State

13 - Handling side effects, dependent state, and async events
14 - Angular signal effects
15 - Angular linkedSignal
16 - Implementing linkedSignal
17 - Connecting observables and Angular Signals with the RxJS interop library
18 - Angular signalResource
19 - Implementing httpResource
20 - Implementing resource and rxResource

4. Using Signals in Components

21 - The benefits of using Angular Signals in components
22 - Passing data as a signal to child components
23 - Two-way binding with signals using model inputs
24 - Querying template elements as signals

5. Signal-Based Architectural Patterns

25 - Enforcing best practices
26 - Converting existing applications to signals
27 - Implementing signals in services
28 - Signals-based state management
29 - NgRx Signals

Conclusion

30 - Next steps

Reactivity and Signals in Angular

Authors

Lara Newsom