post-image

Unlocking the Potential of Angular Signals: A Comprehensive Guide to Angular 17 Latest Announcement

In this article, you’ll find explanation and recommendations on how to use Angular Signals, new Angular 17 feature.

Understanding Signals

A signal is like a smart tag that represents a value. It's special because it can keep track of changes to that value over time, and it lets us control how those changes happen. So, imagine you have a tag attached to a box, and that tag not only shows what's inside the box but also updates whenever something new is put in or taken out. That's what a signal does—it keeps us informed about the value it represents and how it's changing.

The whole goal of signals is to give developers a new easy-to-use reactive primitive that can be used to build applications in reactive style.


Signals are quick way to inform Angular what part of the page need to be updated and run that updated only for that specific element, without checking the whole component.

Signals are also way easier to use and understand than RxJS when it comes to propagating data changes throughout an application.


Implementation

Let's have an look now how to add the signal to our Angular Component.

1. First we assign signal with initial value.

count=signal(0);

2. Now we can create simple function to update the signal.
increment() {

this.count.update((value) =>value+1);

}

Post image

3. Time to add button that will trigger the function and update created signal.

<div class="h-screen">

<p-button (onClick)="increment()" label="Increment" [rounded]="true" severity="secondary"></p-button>

<p>Count: {{ count() }}</p>

</div>

Every time we click on button the signal will update and display new value. This way we're saying Angular to update specific value, without need to re-render or check for changes in this component.

Using a signal in multiple components to share data

Before Angular team introduce signals we're using Service with a Subject or RxJS to achieve similar behaviour. So you may ask yourself what is better to use for my application? All are very powerful feature, but signals are definite way much easier to understand and quicker to setup. With signals we do not need to create subscription and concern about unsubscribe on ngOnDestroy. For me the most powerful is to combine these two features, signals and RxJS. Let me introduce you how I'm using it to share data within my applications.

Let's imagine situation when we have one component that display two buttons: add and delete, depends on which one is clicked we want to trigger the function in another component.

1. First we start with defining our signal.

Post image

2. Now we can set the value to the signal in component where our buttons are.

Post image

3. All we need to do is to subscribe to that signal in second component.

Post image

🚨 Something very important that we need to adjust with signals is to remember that every time we set the signal to the same value so for example we click the button add twice, it will not be trigger for the second time. We need to remember to reset the signal state.

Adding these make a trick:

Post image

Conclusion

Signals are very powerful and game changing feature for Angular.

In summary, the main goals of Signals are:

  • providing a new reactive primitive that is easier to understand, to enable us to build applications in a reactive style much more easily.
  • avoiding unnecessary re-rendering of components that don't need to be re-rendered.
  • avoiding unnecessary checks of components whose data didn't change.

I encourage you to try signals, play with them and look for the best set up for your projects!

______
Thanks for reading 🤍