Angular Signals - Everything You Need To Know

Angular Signals is the new change detection revolution for the Angular framework.

And developers are lovin it.

A few folks seem to be disgruntled at the new direction. Some folks just don't like ground-breaking changes.

But the Angular team has affirmed their commitment to backward compatibility, and ran an entire RFC on Angular Signals before releasing the new Angular signal changes. So it's entirely up to you whether or not you embrace the new change detection system. Zone.js is still around and will be for awhile.

But why Angular signals? Why a new change detection system?

The reason for Angular signals is simple - improve change detection performance.

Signals allow the Angular framework to optimize change detection performance. Plus they're a lightweight dependency - 2KB to be exact.

This is a really sweet deal if you've got a large Angular enterprise app that requires lots of client rendering.

So, today, I'm going to show you everything you need to know about Angular signals.

Let's get into it by starting off with a bit of history.

• How did we get here?
• So exactly, why Angular signals?
• Writing your first signal
• The 3 signal functions
• Should you migrate to signals?
• Future of Angular signals

How did we get here?

The Angular framework is dependent upon it's change detection mechanism. Change detection is how Angular updates the UI in the browser when the state in the app changes.

As Misko (the original creator of Angular) famously said, back in the day when Zone.js was the new change detection system, it supposedly was the bees knees.

Well, Misko, if Zones was the bees knees then what are Angular Signals now? 😀 😀

Back when AngularJS was popular it used something called a digest cycle for change detection.

Then the AngularJS team began working on Angular and they chose a new change detection system based off of a library called zone.js.

Zone.js was developed by Brian Ford and was first released around 2014. His goal was to tackle the challenges of managing asynchronous operations in JavaScript, especially in the context of frameworks needing to track changes across different execution contexts. This library has been the default change detection system for Angular since its inception.

However, as Angular has grown, the team saw the need for a better way of doing change detection.

And now we have Angular Signals! 💥 💥 💥

The awesome Angular team first introduced signals in Angular 16 as developer preview and have since continued to work and mature Angular signals.

Angular signals are very lightweight, around 2KB and have no 3rd party dependencies.

So exactly, why Angular signals?

Angular Signals is a system that tracks how and where your state is used throughout an application, allowing the framework to optimize rendering updates.

That is the whole point of Angular signals: to allow the Angular framework to optimize change detection updates.

Change detection is constantly happening all over your Angular application. Which is fine if your app doesn't get to large. But as it grows that change detection cycle increases. With signals, the Angular framework can make "smart" change detection changes.

Angular signals enable Angular to better understand change detection. And allow the framework to make precision updates which are important for performance.

The best way to understand signals is to start building with them so let's get started!

Writing your first signal

Let's start with a simple example. Imagine we have an increment Angular component.

Before Angular signals existed our code would look something like this.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  template: `
    <button (click)="increment()">Increment</button>
    <p>{{ this.counter }}</p>
  `
})
export class AppComponent {
  counter = 0;
  increment() {
    this.counter++;
  }
}

When the increment button is clicked the Angular change detection mechanism automatically updates the HTML to match the new value of counter.

But with the Angular signal that all changes.

Our component now looks like this.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  template: `
    <button (click)="increment()">Increment</button>
    <p>{{ this.counter() }}</p>
  `
})
export class AppComponent {
  counter = signal(0);

  increment() {
    this.counter.set(this.counter() + 1);
  }
}

What we've taken is turned the counter variable into the signal type.

The 3 signal functions

There are 3 simple signal related functions.

• signal
• computed
• effect

The signal we've already seen in action. It's nothing more then a declaration of a dynamic value.

firstName = signal('Daniel');

The computed is a way to combine multiple signals into a single read-only signal.

firstName = signal('Daniel');
lastName = signal('Kreider');
fullName = computed(() => firstName() + ' ' + lastName());

And last of all, the effect is an operation that runs when a signal value changes. This allows you to programmatically react to signal changes.

firstName = signal('Daniel');
lastName = signal('Kreider');
fullName = computed(() => firstName() + ' ' + lastName());

effect(() => {
  console.log(`The current name is: ${fullName()}`);
});

Angular signals are simple!

Should you migrate to signals?

Angular signals are here to stay. And they're definitely the future of the Angular change detection ecosystem.

They've also matured beyond beta and are now stable since Angular vs 17.2.

So in short, yes, start migrating to Angular signals.

Future of Angular signals

For now, the Angular team has started to float the idea of signal-based Angular forms.

What would that look like? Signal based Angular forms?

And that, my friend, is everything you need to know about Angular signals. In summary, Angular signals allow you to tell the UI what data your app cares about and when that data changes. Angular can then keep you UI in sync with that data when it changes.

What will you build with Angular signals?

Daniel Kreider - Angular Developer