Exploring Angular’s inputSignal, outputSignal and zoneless concept with a TODO App.
Hello there!
Welcome to a practical guide on Angular’s Signals and zoneless change detection. In this article, we will understand how these features can be combinated to create our applications using these new features. For that, We’ll to build a practical ‘TODO List’ example to ilustrate these concepts and benefits.
By the end, I hope that you have a brief knowledge and understand about these features and you can to start to use it on your own projects.
Introduction.
Angular — on its latest versions — has introduced several powerful features, in this article will be explained inputSignal, outputSignal, and the new zoneless idea (provideExperimentalZonelessChangeDetection)— on develop mode that can be combinated with the onPush strategy (ChangeDetectionStrategy.OnPush)to reach a significant increse of performance and flexibility of Angular applications.
- Signals: Signals are reactive values that represent data within your Angular application. They are declarative and provide a simpler way to manage data flow compared to traditional observables (RxJs library, as example).
- Input Signals: these signal are used to receive data from parent components. They are similar to traditional input properties (@Input) but offer additional benefits like reactivity and type safety.
- Output Signals: they are used to emit events from a component. They provide a cleaner and more reactive alternative to traditional event emitters (@Output and eventEmitter).
Benefits of Zoneless Change Detection.
Zoneless change detection offers several advantages over default zone-based change detection (ChangeDetectionStrategy.Default), some of them are:
- Improved Performance: if you delete the need for zones, the overhead associated with tracking asynchronous operations is reduced, leading to faster change detection cycles and overall improved application performance.
- Predictable Behavior: Zoneless change detection provides a more predictable behavior for the change detection. The side effects caused by zones intercepting asynchronous operations can be eliminated. This predictability simplifies debugging and reasoning about application behavior.
- Fine-Grained Control: Developers gain more control over when and how change detection occurs, allowing for more fine-grained optimization. For complex systems requiring optimal efficiency, this control offers substantial advantages.
- Reduced Memory Usage: Removing zones can also lead to reduced memory usage, as the framework no longer needs to maintain zone-related data structures and state.
- Simplified Integration: Zoneless change detection can simplify the integration with other libraries and frameworks that may not be zone-aware, making it easier to build interoperable applications.
Initializing the TODO Project.
To start, we will create a basic Angular project that contains two componentsTodoListComponent and TodoItemComponent.
- TodoListComponent: Its a container that displays a list of ‘TODOs’ and allows to user to add new TODOs.
- TodoItemComponent: Its an individual TODO item. It allows to edit a TODO and set ‘Done’ status for TODOs-task that you have already done.
Understanding InputSignal and outputSignal.
InputSignal.
onputSignal: allows us to bind input properties to reactive signals, enabling more responsive and performant component interactions. The syntax is propertyname=input(),it comes from @angular/core.
outputSignal.
outputSignal: is used to create event emitters that are based on signals, offering a more reactive approach to event handling. The syntax is propertyname: outputEmitter = output(),it comes from @angular/core.
Implementing InputSignal and outputSignal.
TodoItemComponent.
Let’s start by creating the TodoItemComponent. Using previous Angular version, you have to use @input and @output property decorator comunicate a component wit its children and parents, similar that its shown in the next image:
Now, using input and output signals, code is refactored to:
To get or to set a new value, you just to reference to your input variable and then use the next syntax:
And done!!, you already have started to use the new input and output signals!!
Enabling zoneless.
Angular’s experimental zoneless change detection can significantly improve performance by reducing the overhead of change detection cycles.
To enable zoneless change detection, we need to configure our Angular module or app.config file (according to your application settings).
After to start to use provideExperimentalZonelessChangeDetection, you are able to delete all refences to zone.js in your project. In the example project zone.jsis used in two places, (package.json and angular.json).
In both cases, you only should to delete the references. After to delete them, you are able to delete the folder node_modules and re-run npm install(or any other) to check that your project is complete zoneless!
Remember: zoneless feature is experimental and might have limitations.
Conclusion
Using new features — inputSignal, outputSignal, and provideExperimentalZonelessChangeDetection, Angular applications can achieve more reactive and performant behaviors. In the previous article, we demonstrated these concepts using a small project as example. Try incorporating these features into your projects to test how they can improve your applicacion in responsiveness and performance.
Happy coding, thanks for your attention!
Resources
Disclaimer: code shared in this article is just a basic implementation. Depending on your application, you have to implement a large group of changes and maybe implement a lot of test to verify that the application works correctly.
