Signals in Angular 16: A new way to manage state and reactivity

Angular 16 is the latest version of the popular web framework that brings many new features and improvements. One of the most exciting additions is the introduction of Signals, a new way to manage state and reactivity in Angular applications. 😍

What are Signals?

Signals are a new concept in Angular 16 that allows you to create and manipulate reactive values without using observables or subscriptions. Signals are inspired by Svelte, a framework that uses reactive assignments to update the UI automatically. 😎

A Signal is a function that returns a value and can be updated by calling it with a new value as an argument. For example, this is how you can create a Signal that holds a counter value:


import { signal } from '@angular/core';

// create a Signal with initial value 0
let counter: Signal<number> = signal<number>(0); 
// get the current value of the Signal, prints 0
console.log(counter()); 
// update the value of the Signal to 1
counter(1); 
// prints 1
console.log(counter());


Signals can also be derived from other Signals using the computed function, which takes a function that returns a value based on one or more Signals. For example, this is how you can create a Signal that holds the double of another Signal:


import { signal, computed } from '@angular/core';

// create a Signal with initial value 0
let counter: Signal<number> = signal<number>(0); 
// create a derived Signal that returns the double of counter
let double: Signal<number> = computed(() => counter() * 2); 
// prints 0
console.log(double()); 
// update the value of counter to 2
counter(2); 
// prints 4
console.log(double());


Signals can also be used in templates to bind data to the UI. For example, this is how you can display the value of a Signal in an HTML element:


<h1>{{counter()}}</h1>

Whenever the value of the Signal changes, the UI will be updated automatically. This means you don’t need to use ngOnChanges, ngDoCheck, or ChangeDetectorRef to detect and trigger changes. 🙌

The effect function is used to run side effects based on Signals, such as logging, fetching data, or updating other values. The effect function takes a function that runs whenever one or more Signals change. For example, this is how you can use the effect function to log the value of a Signal:


import { signal, effect } from '@angular/core';

// create a Signal with initial value 0
let counter: Signal<number> = signal<number>(0); 

// create an effect that logs the counter value whenever it changes
let effectRef = effect(
  () => {
    console.log('Counter value changed. Current value is ' + counter());
  }
); 

// update the value of the Signal to 1
counter(1); 
// prints 'Counter value changed. Current value is 1'
// update the value of the Signal to 2
counter(2); 
// prints 'Counter value changed. Current value is 2'

Why use Signals?

Signals offer several benefits over observables and subscriptions for managing state and reactivity in Angular applications. Some of these benefits are:

  • Simplicity: Signals are easy to create and use, without requiring any boilerplate code or complex operators. You don’t need to worry about creating observables, subscribing to them, or unsubscribing from them. You just need to call a function to get or set a value. 😊
  • Performance: Signals are optimized for performance, as they only trigger changes when the value actually changes. You don’t need to use pipes or operators like distinctUntilChanged or shareReplay to avoid unnecessary updates. Signals also use [structural sharing], which means they only copy the parts of the value that changed, reducing memory usage and garbage collection. 💯
  • Debugging: Signals are easier to debug, as they have clear names and values that can be inspected in the console or in tools like [Augury]. You don’t need to use tap or debug operators to log or trace observables. You can also use breakpoints and step through the code that updates or derives Signals. 🔎
  • Testing: Signals are easier to test, as they don’t require any mocking or stubbing of observables or subscriptions. You can simply call or spy on the Signal functions to check their values or behavior. 🧪

How to use Signals?

To use Signals in your Angular application, you need to install the @angular/core package, which contains the signal, computed, and effect functions. You can also use the Signal and WritableSignal types to annotate your code.

You can then create and use Signals in your components, services, directives, pipes, or any other Angular entities. You can also inject Signals as dependencies using the @Injectable decorator.

To bind Signals to your templates, you can use interpolation ({{}}) or property binding ([]) syntax. You can also use event binding (()) or two-way binding ([()]) syntax to update Signals based on user input.

To run side effects based on Signals, such as logging, fetching data, or updating other values, you can use the effect function, which takes a function that runs whenever one or more Signals change.

Here is an example of how you can use Signals in an Angular application: In this example, we have created a service that holds a Signal for the number of clicks in the application. We have also created two components that display and update the Signal value. We have used the effect function to log the Signal value whenever it changes.

You can see the result of this example in this StackBlitz demo. 😁

Conclusion

Signals are a new feature in Angular 16 that provide a simple and efficient way to manage state and reactivity in Angular applications. Signals are functions that return and update values, and can be used in templates, components, services, or any other Angular entities. Signals are inspired by Svelte, and offer several benefits over observables and subscriptions, such as simplicity, performance, debugging, and testing.

If you want to learn more about Signals, you can check out the official documentation, or watch this video by the Angular core team members.

I hope you enjoyed this article and learned something new about Signals in Angular 16. If you have any questions or feedback, please leave a comment below. 

Thank you for reading 😊

Comments

Post a Comment

Popular posts from this blog

Which GOF patterns are good for C#?

Hello, C# fans! 😊 In this article, I will answer a common question that many C# developers have: which GOF patterns are good for C#? 🤔 GOF patterns are the 23 design patterns that were described in the book “ Design Patterns: Elements of Reusable Object-Oriented Software ” by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides. They are also known as the Gang of Four (GoF) patterns. They are divided into three categories: creational, structural, and behavioral. 📚 These patterns provide solutions to common software design problems that you may encounter in your projects. They help you write code that is more reusable, flexible, maintainable, and elegant. 😍 But not all GOF patterns are equally useful or applicable in C#. Some of them are more relevant and popular than others. Some are already supported by the language features or the .NET framework. Some of them may be outdated or replaced by newer patterns. 😮 So, which GOF patterns are good for C#?  Creational patterns...
Read more

Proxy pattern in C#

Hi! Today, I’m going to talk about the Proxy pattern and how it can be used in C# 😊. The Proxy pattern is a structural design pattern that provides a surrogate or placeholder for another object. A proxy controls access to the original object, allowing you to perform something either before or after the request gets through to the original object. Why would you want to use a proxy? Well, there are several reasons, such as: Lazy initialization : You can create a proxy to delay the creation of a heavy object until it’s actually needed. Remote access : You can create a proxy to represent a remote object and handle network communication behind the scenes. Access control : You can create a proxy to check the permissions of clients before allowing them to access the original object. Logging : You can create a proxy to log the requests and responses of the original object. In C#, you can implement the Proxy pattern by creating an interface that defines the common methods for both the original...
Read more

Bridge pattern in C#

  Hello, C# enthusiasts! 😍 Today, I want to share with you a very useful design pattern that can help you separate the business logic from the data access layer in your applications. This pattern is called the Bridge pattern, and it is one of the structural design patterns that deal with how classes and objects are composed to form larger structures. 🏗️ The Bridge pattern allows you to decouple an abstraction (such as an interface or an abstract class) from its implementation (such as a concrete class that implements the interface or inherits from the abstract class) so that the two can vary independently. This means that you can change the data access layer without affecting the business logic layer, and vice versa. 🙌 But why would you want to do that? Well, there are many scenarios where you might have more than one version of an abstraction, or more than one way of implementing an abstraction. For example, suppose you are developing a financial application that needs to perfo...
Read more