Purpose of the article: reactive programming in Angular easier and more efficient, allowing us to build better web applications with less hassle
Intended Audience: angular developers
Tools and Technology: vs-code, angular
Keywords: signals, angular-signals
In this blog, you’ll learn about using signals in Angular. Signals are like special alerts that let different parts of your Angular app know when something important happens, like when data changes.
Let’s say you have a shopping app built with Angular. You might want to track the number of items in a user’s cart and display it in multiple places throughout the app. Instead of manually updating each display whenever the cart changes, you can use signals to automatically notify all the displays whenever the cart changes. The blog will show you how to set up signals in Angular and how to use them to keep your app’s data and displays in sync. With signals, your app can be more responsive and efficient, making for a better user experience.
1. What’s Signal
2. Settable Signals
3. What is Computed?
4. Effect!
5. What Else?
1. What’s Signal
We want to keep track of certain data using what we call a “signal.”
Think of a signal like a special box that holds information and can tell us whenever that information changes.
Let’s say we want to keep track of the number of users currently using the app. We can create a signal called “users” and initially set it to a certain number, let’s say 159,845.
This signal acts like a function that, when we ask it for its value, it tells us how many users are there at that moment. And if the number of users changes, the signal will let us know. So, in code, it might look like this:
javascript
// Define a signal called "users" and set it to 159,845
let users = signal(159845);
// Later, if the number of users changes, we can update the signal
// For example, if the number of users increases to 160,000
users = signal(160000);
// Now, if we ask the "users" signal for its value, it will give us 160,000
console.log(users()); // Output: 160000
In this example, the signal function creates a signal with an initial value of 159,845. Later, we update the signal to have a new value of 160,000. And when we call the users () function, it returns the current value of the “users” signal, which is 160,000.
IMP: Signals, when activated, are functions that require no arguments. They promptly deliver the current value of the signal upon execution. (()=> T).
2) Settable Signals
Let’s say we want to keep track of the number of users on our platform. Initially, we set it to 159,845.
let users = signal (159845);
Now, if we get an update and find out, we actually have 160,000 users, we can change the value:
users.set (160000);
And if more users join the platform, we can update the count accordingly:
users.update (userCount => userCount + 1);
We can change its value using .set () or update it based on its current value using .update(). This way, we can always keep track of the most up-to-date number of users on our platform.
3) What is Computed?
We have some numbers that are based on the number of users.
For example, we want to show the difference between this month’s data and last month’s data.
Instead of manually updating these numbers whenever the user count changes, we can use computed values. These are values that are automatically calculated based on other values, in this case, our user count.
For instance, let’s say we want to calculate how many new users joined this month compared to last month. We can define a computed value called ‘ thisMonth’ that subtracts last month’s user count from the current month’s user count:
javascript
const thisMonth = computed(() => users() - lastMonth);
Now, whenever the user count changes, the ‘ thisMonth’ value will automatically update to reflect the new difference between this month and last month. It’s like having a smart calculator that keeps track of changes for us, so we don’t have to do it manually.
4) Effect!
Sometimes, we want something to happen automatically whenever a certain value changes. With effect(), we can make that possible by scheduling and running a specific function whenever a signal has a new value.
For instance, let’s say we have a feature in our app where connecting lines between users need to be redrawn whenever the number of users changes.
javascript
users.set(180000);
effect(() => redrawLines());
In this example, we’re setting the number of users to 180,000. And then, using effect(), we’re telling the app to automatically redraw the connecting lines every time the number of users changes. So, if the user count goes up or down, the lines will be redrawn accordingly, without us having to do it manually. It’s like setting up a rule that says, “Whenever the user count changes, redraw the lines.”
5) What Else?
Angular Signals offer some powerful features:
Flexible Effect Scheduling: Angular Signals enable effortless scheduling of effects triggered by signal changes, seamlessly integrating with Angular and libraries like RxJS for UI updates based on signal changes.
Compiler Optimization: Angular Signals optimize reactive operations, leveraging the compiler to enhance DOM updates for faster and smoother web app performance.
Lazy Evaluation: Angular Signals employ lazy evaluation, executing operations only as needed, automating efficient handling of multiple updates without requiring manual batching.
Author Bio:
Sankara Rao KONCHADA
Digital Transformation - Principal Software Engineer
Accomplished UI software engineer with 3 years at MOURI Tech. Leverage expertise in HTML, CSS, Bootstrap, JavaScript, jQuery, and Angular to design and develop user-centric, visually captivating web applications.
