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

Introduction

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

What Are Signals

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

Introduction to the Angular Signals API

Introducing signals
Angular writable signals
Angular computed signals
Using writable and computed signals together

Side Effects, Async Events, and Dependent State

Handling side effects, dependent state, and async events
Angular signal effects
Angular linkedSignal
Implementing linkedSignal
Connecting observables and Angular Signals with the RxJS interop library
Angular signalResource
Implementing httpResource
Implementing resource and rxResource

Using Signals in Components

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

Signal-Based Architectural Patterns

Enforcing best practices
Converting existing applications to signals
Implementing signals in services
Signals-based state management
NgRx Signals

Conclusion

Next steps