Angular Signals

^{What you need to know}

Tran Nguyen - 04/11/2023

1

v16

Agenda

​

• What is Signals?
• How it works?
• Signals and change detection OnPush.
• Will Signals replace RxJS?

2

What is Signals?

3

Why not continue with zone.js?

• Review Change Detection in Angular

4

OnDefault

OnPush

Have you ever wondered…

5

^{Are we going to have another change detection strategy?}

6

❤️

7

Signals

That’s the problem Signals solve for us

What is Signals

8

Signals

+

What is Signals

A variable + change notification

9

Observed

Update

Notify

dependents

Always

has a value

Synchronous

Example

10

• What are dependents in Signals
• How to notify them

How it works

11

signal<T>(initialValue: T): WritableSignal<T>

• Writable Signal

• ^{set(): set the signal to a new value.}
• ^{update(): store a new value created from the current value.}
• ^{mutate(): directly modifies the current value.}
• ^{asReadonly(): returns a new signal that stores the same value but does not allow it to be modified.}

12

Signals and Change detection OnPush

• Demo

13

• Demo

14

Does Signal give us any benefit over OnPush Strategy?

15

16

🤜🤛

Signals

Behaviour Subject

17

• Has initial value

18

👉 Observable

DEMO

This demo will answer those questions:

• Issue with RxJS
• Will signals replace RxJS
• Is there any issue with signals
• How signals and RxJS works together

19