Input Signals in Angular 17.1 - How To Use & Test

there is no doubt that signals in angular will greatly and positively impact our angular apps many teams already started adopting this reactive primitive and even more are planning to do so in both cases when you start your migration to signals you will encounter the following use case you might have a signal like in my case I have a search query signal and you also might have some component input like my user inside the computed function I'm tracking the changes in the query signal so every time the query string is changed I will recompute their filtered users leaving in the array only the ones whose name starts with the new search query string in the browser it looks like the following I type in the search Field characters like a and n and only the user with the name Angela is displayed in the list however if at this time I will add a new user to the user's array he will not be displayed there even though the new username matches the search criteria this is because our users input is not reactive and changes in that array is ignored by the compute function this is something we will be fixing in this video and I will show you how to uh solve this problem if you use angular before 17 .1 and how to achieve the same thing using the brand new signal inputs my name is nensy and my mission is to help people to become Advanced engl developers who develop apps consciously knowing what they are doing and how things are working you can check out my YouTube channel as well as private courses to see which topics I covered already in the past but today we will learn more about signal inputs before we dive into the topic I would like to quickly mention an open- Source Library rxb which is the sponsor of today's video every modern browser has a builtin a local noq database called index DB you can think of it as a local storage on steroids that supports a broader range of data types and different queries R xtb is a database built on top of indexb and exposes a reactive API based on observables which is so familiar to every angl developer using rxdb you can locally store and reactively track the data changes across multiple tabs and it cares about proper synchronization with your data base on the server which makes it a great choice for realtime apps however if your application loses the internet connection it is not a problem because rxdb implements the offline first approach so your app will continue working and synchronize the data later once the connection is recovered besides that it is easy to replicate databases across multiple devices and apps and various plugins enable a wide range of supported environments like not GS Deno electron react native capacitor and others the core functionality is open sourced and free so you can play with it already now you will find all the links in the video Des description and now let's get back to the main video topic let's quickly think about how we could fix this issue and make the users input reactive if we use angular before 17.1 some of you could suggest turning the array we provide from the app component into a signal and then provide the signal directly as an input value yes after some adjustments it will would work but passing signals as an input value is considered to be an anti pattern I don't want to stop too much on it just say that by doing so you lose the unidirectional data flow and centralization of data changes because child components can freely change the value of the signal impacting the parent component even though you're going to fix some of the issues by readon signals you still introduce a breaking change to your compon component API and force consumers of your component to use signals which in the existing codebase might require additional refactoring efforts a better way would be to transform input data to a signal inside the user list component you could achieve it multiple ways but one of the most popular would be using Setters so you could eventually have something like following so here I introduced the private users proper property which is a simple signal and the old input property I'm going to transform into a Setter which will be updating the user signal with a new value each time the input value changes to avoid naming conflict with the user signal we can rename the setter and start its name with the underscore this change however causes an error because we just change the public component a Pi but we can simply fix it by using their airing feature and exposing their input as their old name without the underscore the last but not least change is to adjust our callback inside the computed because now users property signal so we need to add parenthesis and fantastic so now my code is reactive so if I go to the browser start typing a n and then if if I add a new user with a name andd I will immediately see him in the list which was not happening before if you remember since angular 17.1 we can achieve the same thing much easier now you can simply remove this getter and instead of signal right here you can use a new function called input that comes from the angular core just like that so here there is no need for decorator anymore just a simple function of course you can have or not have the initial value and if you don't have it uh it might be undefined so we would need to use the question mark right here and last but not least the corresponding input property must be public because uh you will get a compilation error otherwise this is simple notation behaves absolutely the same way as the code before because input function under the hood converts the value provided to this input as a signal but what about other input features like making input aliens transforming the data or making the input required so let's cover them one by one to make an alas you can use a config object that comes after the initial value here you can see a property and areas where you can define a new value for example let's imagine that we want to expose it as a user input uh but internally we could rename the property to for example user list and as you can see everything perfectly works but what about the data transformation it is still possible just add a property transform in the configuration uh object and add that transform function as a value I have already prepared a function that performs some transformation and namely it concatenates the users's first and last name in a separate property called display name and removes the first and last name from the original object but once we apply this transform function you can see that currently we have a compilation error this is because the value type of my input signal no longer matches the one return from the transform function this is because when you define type like this you automatically Define the value type that can be written into this input and the value that we can read from it so because after the transformation we will be reading the value of modified user array we have to reflect it in the input generic type accordingly and Define the read value type as a first parth parameter in this generic type so basically we say that we can receive a user array as an input value from some parent component but inside the user list we will use the value of type defined right here however if the transform function is properly typed the input function can properly resolve types automatically from the transform function function I could just remove this generic type from here and let magic happen so now you can see that types were perfectly resolved automatically and I still see the hints where I have to adjust my code so this is in the template here and also I have to do it inside the computed callback and also replace the name property with the display name let's move forward and I will show you how to make uh the input required to make a signal input required you just type dot required right here and simply remove the initial value because the required value suppose that the initial value would come from the parent component right so as simple as that and in terms of features this is everything what the input function can offer us which is pretty much the same what the old input decorator does however the signal input has one quite significant difference compared to the input decorator and it might impact the current logic of your component and also the way you test the component with signal input you should remember that unlike regular inputs the signal inputs are read only meaning that there is n API that allows you to change the signal value the new value can be set up only by parents who provide value to this input which supposed to lead to the cleaner and easier to follow code according the angular team but this leads us to another question like how do we test components with input signals if inputs are read only because before to change the input value in the test many developers were just assigning values directly to the component instance properties which will not longer work with readon signals input and here you have two options option number one is to access the component ref from the component fixture and call the set input method that will properly set a new value for the input or you can use the test host strap stry it is when you wub the component that is under the test with some additional component Rubber and then you can pass input values from the test host component like it was in the real application I cover both of these strategies in my dedicated course called conscious angular testing that you can check out later following the link in the video description otherwise in zone based components the input function behaves the same way as the old uh input decorator the value of the input is still being updated during the change detection it still calls the NG on changes life cycle hook and so on in the future when signal-based components will be introduced the changes will be more noticeable because for example the NG on changes life cycle hook will be removed and in order to track changes of your signal input puts you would need to use the effect function but we will discuss it in a separate video when the signal components are ready but you can start preparing for the future already now by adopting these new input signals in your components to make the uh migration simpler in the future however I would not recommend migration for the big Enterprise applications in my opinion it is too early right now but if you have small application you can already start to do it step by step and if you watch this video until now and you feel uncomfortable what are signals effects and other computer functions I have a dedicated video about that so you can check it out following the link that appear somewhere here all right guys thanks for watching this video Until the End I hope this video was useful and if so please share this video with your colleagues and friends because it will help my channel to grow and uh get more traction also follow me on my other social media where I regularly post different short tips and tricks about angular and um yeah don't forget to leave comments under this video because I also curious what you think about this new angular uh features and how you can apply them in your angular apps otherwise I wish you productive week ahead stay safe and see you in the next video [Music] n

Channel: Decoded Frontend

Views: 8,671

Keywords: angular input signals, angular signal input, angular signals example, angular signals tutorial, angular reactive programming, angular signals, angular 17 whats new, signals in angular, angular 17, frontend development 2024

Id: U8YXaWwyd9k

Length: 14min 34sec (874 seconds)

Published: Tue Feb 13 2024