Angular Signals

10 examples to start using Signals and manage Angular states

Updated to Angular v.19

21 snippets

52 mins

v.19.x

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Introduction

Angular signals are a powerful feature that enhances reactivity in applications by providing a more efficient way to manage and track changes in data.

They allow developers to create reactive variables that automatically update the UI whenever their values change, eliminating the need for manual change detection.

Signals has been introduced in Angular v.16 and became stable in Angular v.17 Today they represents the best strategy to manage local states in Angular applications (v.18+)

This leads to cleaner, more maintainable code and improves performance by ensuring that only the necessary components are re-rendered.

# 1. Signals & Interpolation

Signals are a part of Angular's reactive programming model. They allow you to define reactive state variables that can be used in your templates and business logic.

SWITCH LAYOUT

In this example, we're creating a simple Angular component that uses a signal to manage and display a counter value.

Signals are a powerful reactive primitive that helps in state management.

The signal function is used in Angular to create an initialize signals. Here we initialize a signal with the value 123.

Angular Component class

Signals in Angular are similar to observables but are simpler and more efficient for certain use cases.

In the component's template, {{counter()}} binds to the counter signal. This ensures that whenever the counter value changes, the displayed value in the template is updated automatically.

Angular Template

When Angular renders the template, it replaces {{ counter() }} with the value of the property, so the output will be 123

src/app.component.ts

Create a new property message, initialize it with the string hello and display it in the template

Click or in the editor to practice

# 2. Update Signals value

SWITCH LAYOUT

There are two ways to update the value of a Signal:

`set`

The set method directly assigns a new value to the signal. It's straightforward and typically used when you need to replace the current value with a completely new one.

src/app.component.ts

`update`

The update method is used to modify the current value of the signal based on its previous value. It takes a function as an argument, which receives the current value and returns the updated value.

This method is particularly useful for operations that depend on the current state, such as increments or decrements.

update ensures that the state change is atomic and avoids potential race conditions. This is particularly useful in scenarios where multiple updates might occur in quick succession or concurrently.

Try to increment counter by 2
Avoid counter value to be greater than 10

TIP

Use a condition to check the signal value. You can read a signal value using this.counter() in your class

Click or in the editor to practice

Quiz

What is the right syntax to create and inizialize a Signal with an empty array?

counter = signal([])
counter = Signal([])
counter = new Signal([])

# 3. Signal - effects

SWITCH LAYOUT

The effect in Angular provides a declarative way to handle side-effects based on reactive state changes.

It is invoked:

Immediately upon initialization.
Whenever any reactive dependency within its scope changes ( when one of the signals used inside the effect is updated. We'll see more example later in the chapter)

The example

The constructor sets up an effect that reacts to changes in the counter signal.

Since, the effect function is invoked every time the counter value change, we can use this approach to trigger a side effect every time the counter changes.

For example we can make an HTTP request based on the counter value or, just like in this example, we can print a log and we save the value into localStorage.

src/app.component.ts

You can use multiple signals in a component and define several effect functions. So, in this exercise you should:

create another signal, named message, with and empty string as initial value
add a button that assigns a random string to the signal
Create another effect function that display a console.log when message changes

Click or in the editor to practice

How to check if localstorage is written

Trying the previous code, you can notice that a console.log is displayed each time a button is clicked. Furthermore, the value is also saved on localStorage that you can inspect by using your browser Dev Tools -> Application Tab.

Since our example is running in a Stackblitz editor, it won't be available on localhost:4200 (the host and the port usually used in Angular applications that run on your local machine ) but, as you can see in the screenshot below, it's available in a Stackblitz subdomain:

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register

Send your feedback

Angular Signals

10 examples to start using Signals and manage Angular states

Updated to Angular v.19

21 snippets

52 mins

v.19.x

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Introduction

Angular signals are a powerful feature that enhances reactivity in applications by providing a more efficient way to manage and track changes in data.

They allow developers to create reactive variables that automatically update the UI whenever their values change, eliminating the need for manual change detection.

Signals has been introduced in Angular v.16 and became stable in Angular v.17 Today they represents the best strategy to manage local states in Angular applications (v.18+)

This leads to cleaner, more maintainable code and improves performance by ensuring that only the necessary components are re-rendered.

# 1. Signals & Interpolation

Signals are a part of Angular's reactive programming model. They allow you to define reactive state variables that can be used in your templates and business logic.

SWITCH LAYOUT

In this example, we're creating a simple Angular component that uses a signal to manage and display a counter value.

Signals are a powerful reactive primitive that helps in state management.

The signal function is used in Angular to create an initialize signals. Here we initialize a signal with the value 123.

Angular Component class

Signals in Angular are similar to observables but are simpler and more efficient for certain use cases.

In the component's template, {{counter()}} binds to the counter signal. This ensures that whenever the counter value changes, the displayed value in the template is updated automatically.

Angular Template

When Angular renders the template, it replaces {{ counter() }} with the value of the property, so the output will be 123

src/app.component.ts

Create a new property message, initialize it with the string hello and display it in the template

Click or in the editor to practice

# 2. Update Signals value

SWITCH LAYOUT

There are two ways to update the value of a Signal:

`set`

The set method directly assigns a new value to the signal. It's straightforward and typically used when you need to replace the current value with a completely new one.

src/app.component.ts

`update`

The update method is used to modify the current value of the signal based on its previous value. It takes a function as an argument, which receives the current value and returns the updated value.

This method is particularly useful for operations that depend on the current state, such as increments or decrements.

update ensures that the state change is atomic and avoids potential race conditions. This is particularly useful in scenarios where multiple updates might occur in quick succession or concurrently.

Try to increment counter by 2
Avoid counter value to be greater than 10

TIP

Use a condition to check the signal value. You can read a signal value using this.counter() in your class

Click or in the editor to practice

Quiz

What is the right syntax to create and inizialize a Signal with an empty array?

counter = signal([])
counter = Signal([])
counter = new Signal([])

# 3. Signal - effects

SWITCH LAYOUT

The effect in Angular provides a declarative way to handle side-effects based on reactive state changes.

It is invoked:

Immediately upon initialization.
Whenever any reactive dependency within its scope changes ( when one of the signals used inside the effect is updated. We'll see more example later in the chapter)

The example

The constructor sets up an effect that reacts to changes in the counter signal.

Since, the effect function is invoked every time the counter value change, we can use this approach to trigger a side effect every time the counter changes.

For example we can make an HTTP request based on the counter value or, just like in this example, we can print a log and we save the value into localStorage.

src/app.component.ts

You can use multiple signals in a component and define several effect functions. So, in this exercise you should:

create another signal, named message, with and empty string as initial value
add a button that assigns a random string to the signal
Create another effect function that display a console.log when message changes

Click or in the editor to practice

How to check if localstorage is written

# 4. Multiple effects and dependencies

SWITCH LAYOUT

You can also define multiple effect functions inside the same constructor.

This is the answer of the previous "Practice Box" exercise

As we said, effects are invoked immediately upon setup and whenever their respective reactive dependencies change, in this example counter and message.

It means that:

if you now click the inc() method, only the first effect will be invoked.
The second effect will be triggered when randomMsg() is invoked.

So, what is a dependency?

Every signal used inside an effect can be considered a dependency. So you don't need to explicitly specify which signals should trigger the effect. Just use signals inside an effect and the function will be be invoked each time their values change.

src/app.component.ts

Create a new effect function that display both values and it's then triggered when each of the signals change

Click or in the editor to practice

Show me the solution

This example show how an effect is invoked when every signal is updated, in this case both `message` or `counter`:

src/app.component.ts

Angular Cookbook: The Basics

Send your feedback

Angular Cookbook: The Basics

# Introduction

# 1. Signals & Interpolation

# 2. Update Signals value

`set`

`update`

Quiz

# 3. Signal - effects

The example

Send your feedback

# Introduction

# 1. Signals & Interpolation

# 2. Update Signals value

`set`

`update`

Quiz

# 3. Signal - effects

The example

# 5. Avoid methods binding...

# 6. Signal: derived state & computed

# 7. Inner Computed Signals: not optimized

# 8. Inner Computed Signals: improved

# There is more...

# What's Next

# 4. Multiple effects and dependencies

Show me the solution