Why is everyone obsessed with Angular Signals??

so everybody is hyped about it and so I had to talk about this we're talking about signals signals is something that solid GS introduced but it was there before even that I believe it was in Knockout JS but then it eventually made it to solid.js then preact and react had some implementations and now angular basically implemented their first version or not even the stable version but their first implementation of signals which is supposedly a really good reactive Paradigm of how we manage state or even how we want to notify different places within the code if something changes now we have used observables for this in the past so why do we really need something new the main thing that angular team has been pushing for for quite a while is basically getting rid of zones or Zone JS now Zone JS is a third-party Library which angular uses to work with the change detection because we need to know if someone clicked something because the components really can't know if something changed within the component until the user clicks or there's an input or there's an API call or if you're using something like set timeout or set interval so Zone JS works with angular by monkey patching all of these events and then we also have rxjs so if we get rid of zones that means we have a better change detection that we can work with and signals might actually make it possible so in this video we are going to work with signals we have an application already and we are going to see how we can use signals to work with the app if you don't know who I am I'm a Google developers expert in angular for the past five years I'm also the author of The angular cookbook which is right here and I'm working on the second edition of it which is going to come this year so please stay tuned now without further Ado let's get started so this is the app that we are working with we have an angular wishlist application with signals I'm using Tillman CSS for the UI what we have so far is essentially a list of wishlist items and I can actually mark them done or undone in this particular case and you can see that I can see the number of items that have been done but it's not reflected yet because we are going to work on it but I can also go ahead and type something and if I hit add nothing really happens the form is reset but if I go to the console I see the object that is just created with the text that I provided for this new wishlist item so if I go to the code this is what it looks like so we have essentially an app that uses Standalone components for example the app is bootstrapped with the app component and the app component itself is a standalone component so we don't have any modules in here same goes for the other components So within the application what we do or within the app component we use the wish list component if I go to the wishlist component we see a couple of things so in the wishlist component here you will see that we have a heading we have a form and then we have also the count of done versus undone and then we also have the wishlist item now I could go and show the code but there's a better way if you Google angular developer tools you can actually find the Chrome extension and here you can install it to actually see the component tree just like this so you can see we have the root we have the wishlist component inside here we have the form and then we have a bunch of wishlist items that you can see and I can also go and see what properties do they have for example the first wishlist item which is right now shown and the at the bottom because it's marked done has the item property just like this we have a done we have an ID and here we have the text as in angular cookbook now within the wishlist component as you saw we are running a loop over the wishlist our way and we basically have all these items that we show on the UI now apart from that we also have these components like the new business form which is an HTML form with a text area and a button and if I go to the logic then we have a function that essentially just creates this new item and then logs it it does nothing else apart from just you know resetting the form then if I go to the wishlist item component it is mostly a presentational component so here you can see an article with a text and a checkbox and if you see the UI you can see the text and the checkbox right here so you can mark them as done or not done and then if I go to the components typedcript file and here you can see a bunch of bindings but the main one I want you to look at is this item click so if I click on the host element which is if I click on any wishlist item it essentially changes the done to its reverse value so either true or false in this particular case when I click it or when I toggle it now we are not using any signals or any State Management tool whatsoever the question is where does this data come from what we see the wishlist items so I have a constants file here which is right here it's a dummy data and this is what we see so first of all what I want to do is to create a signal that contains this value right now if I go to my wishlist component here you can see that we are directly assigned finding the value of that constant to the wishes array and then we Loop over that array to pass all the items into the wishlist item and wishlist item basically renders them so the first thing I would want to do essentially is not to have this array hard coded or not provided like here but rather from a signal so what I'm going to do is I'm going to open another terminal and what I would do is essentially I would create a new service I would say NG G service and here I would name it wish list and that's pretty much it so when we have this created I'm going to go to this and then I'm going to create an array here so I could say something like wish list array just like this and here what I would do now is create a signal so I'm going to use the signal method from angular core and then this requires an initial value so you can provide it what I'm going to provide here is the dummy wishes array so I'm providing the array here in this case and now I should be able to access this what is this really it's a setable signal so if you Mouse over you can see this is a settable signal that I can use anywhere so what I'm gonna do is I'm gonna just save this file and then I'm gonna go to the wishlist component where I still have this dummy wishlist array hard coded here so instead of this what I'm going to do is I'm going to actually go and inject my service here so I'm going to say wishlist service or WR service equals inject and in here I can provide the wish list service just like this and in here I can now say this Dot and in here I can now say wishlist array or which is service and then here dot WL array so this is essentially assigning the settable signal to this wishlist array so this here is essentially a signal so what I can do now that now that I have this I can go into the template and in here instead of using it like this because now this is not an array it's a signal so I have to use the method just like this so just those parentheses and when I do this I actually get the array and then everything should be working fine so if I save this now and go to my UI let's see what happens if I refresh now it says WL array does not exist on which the service let's try this again so it seems like if I go back to my service I have WL array here I'm going to save this make sure that it compiles successfully it does and now if I go to my app without changing anything you can see it works so something was off there but with the same code that I just showed you it works you can see that I have all the list of wishlist items here I can mark them done or undone as before so everything is working all we changed was just the array not being in the wishlist component and rather being in the service as a signal now what I want to do is to be able to add items to this wishlist array so I'm gonna go to my new wishlist form and in here after I'm logging this new item I could actually use the wishlist service here as well so I would say WL service here and here same thing inject wish list service we're going to be working this in almost every opponent and now that we have the service I'm gonna after this log say something like this dot wlservice.wl array and in here I can use the set method the set method essentially sets the new value for this signal and anywhere this signal is being used it's going to get the updated value in our case we actually have the value being used here in the template just like this and since we are using it here it's going to re-render this whole list based on the new value so what I'm going to do is here I'm going to say hey set the value of this WL array which is in the signal to what to actually an array that contains all the value from the array but then pushing the new item on top of it so we're gonna be saying all right first we see the new item that we just created and then the rest of the array so it creates a new value for it this is a really good way of setting a new value because this is immutable so what we are trying to do here is we are creating a new array instead of modifying the original one now signals do not require you to do that you can actually update the same value or get the same array and push to it and then set it it doesn't really matter but it's good to use this approach that whenever you're setting a new value for an array it is done in this way by creating a new array rather than modifying the existing one so now I'm going to save this and let's see if it works so if I go back to my browser and I say something new let's see what happens if I click add there you go you can see that I got something new here I can also see that I got a new business item if I click this am I able to see the item yes you can see something new here and you can see the new ID that we just created and also the done set to false so I am able to actually add more items to it the only problem I have right now is that this change so I think something messed up here but we'll talk about that in a bit so the first thing I would want to do now is if I go to my wishlist component here you're gonna see that here we are still using wishlist array like this and now not with the method which means that the length doesn't count in this case so I'm going to use the method here to see if that fixes the UI to some extent so I'm going to save this and now in the UI you can see that it shows the value correctly for the wishlist item so if I go here and say something like new and hit enter it would not do anything because this is a text area but if I hit add here you can see that here the length is shown correctly if I add more it would change as well but this value here this does not get updated because if I Mark anything like this you can see that this doesn't really work and that is because we have not worked upon that yet so if I go to my code what do I use here exactly I use something called finished count which should basically be hey how many items from this array are finished and I could go into my code here and I could do that in the NG on in it so I could do something like hey can I do something like this dot finish count equals this dot I could say something like wishlist array which is essentially a signal so I could say hey get the value of the signal like this and then you can do a filter so you could do something like a filter and in here you can say item and then here you could do something like hey how many items are done so you could say something like item dot done and then here you can do something like dot length so this will give us a finish count would that work let's see now if I come here you can see the initial value is absolutely correct because the dummy data has this one set to true so now if I refresh you can see it works pretty well if I change something does that reflect it no why because this only happens or triggers once when we do NG on in it because that's what we are doing we are saying hey get the actual array filter it and give it the value of the length but this variable which is essential a number is only set when this code is executed once if anything changes within this array this variable will not be changed because we are not doing anything or there's no mechanism to do so now if I wanted to handle it in the traditional way I would have to go and put this logic or update this finish count somehow whenever I'm adding an item or whenever I'm marking any item as done in this particular case but this would not be helpful in this case so first of all what I would want to do is I would want to make this a computed property so what I would want to do is in this particular case I'm going to actually cut all of this and in here I'm going to say something like computed if I say compute it from angular core this is essentially the computed function for signals which takes a callback and inside here you can return a value so I could do something like return and this now you will notice that this is red and that is because we are saying that this finish count is a number but what this basically returns from computed is essentially a signal so there's a difference between that so I can't really have this set to zero in the beginning now so I could do something like colon and here I would say something like a signal now that we have this I could also say signal of number and that would make it happy because you can see that this computed basically sends back a signal of number and that is the type that we have here as well now that this finish count is a signal I can't use it in here like this I would have to use it like a signal so I would have to use the parenthesis to actually get the value let's save this and try this out so now if I try to Mark anything no it doesn't really work still why because this value is computed if this wishlist array signal changes but the thing is whenever we Mark something done or not which happens inside the wishlist item component we just change the actual item we don't change the array the signal itself so instead of doing this we would have to actually change the array so what I'm going to do here is I'm also going to inject the wishlist service here so I'm going to say wishlist service inject and here I could say wishlist service and then here what I would do is I would go here and say all right this dot which the service dot which is array has to be set to what exactly I'm gonna actually copy this and then I'm going to say something like hey give this a new array and in here you're gonna map through this whole array and then what would you do when you you find an item you see if this particular item is the current item and if that's the case then you switch the done value otherwise you don't so I could say something like if here item or item dot ID equals this dot item dot ID then we do something or we switch done value if that's not the case then we just return the item in this case okay and this item means no change to the wishlist array item so when this is the case we could say return and we can say dot dot dot item so everything that the item has but the done value changes so I would say something like done is set to not item dot done so this is going to be hey if it was true then set it to false if it was false set it to true I can remove this comment as well so now we are actually updating the wishlist array signal and the value basically becomes a changed array that has the items done value swapped I don't need this now because it would automatically reflect now that I have this let's check this out so now if I try to click this boom there you go you can see that it automatically updates the value of this computed because you could go and actually check this out so if I go to sources and if I go to the new wishlist form component not the new one but the wish list item component and in here if I go and put a breakpoint right here and then I also go to for example the wishlist.component.ts and in here I go and put a breakpoint here in the computed one then let's see what happens as soon as I mark this one undone you're gonna see that we came into the item click so we are now changing the value in the way and I'm gonna just put it here so we change this angular cookbook second edition so if I hit play you're gonna see that the match that we get is this item with the angular cookbook second edition and this dot item is also angular cookbook second edition so it flips the done which was previously true to now false and as soon as that happens our computed gets triggered and since this is triggered now it's going to filter out with the new value so it's going to say all right not two out of three is done but one out of three is done so if I just move this forward you can see that this changes to one out of three done and you can basically work with this and check this out as much you want but you can see that now if I try something here hit add something more this value is up to date but then also these values are up to date as well so now we have learned how to get a computed value from a signal the important thing to learn here is that the computed function or the computed value will be computed whenever any signal inside this callback would change so it doesn't matter which signal you're using it's so magical that if you just put it inside this function or your computed value basically depends on a signal whenever the signal changes the computed value changes which basically makes sense so now that we have learned how to basically get a value from a signal how to set a value in a signal and how the computed value Works we're going to talk about something cool called effect and an effect is something that you use for side effects so if you want to make an API call if you want to save things to local storage you would use an effect now the thing here is that if I want to say all right whenever anything changes in a particular signal please save it to the local storage how would I do it in this particular case I would actually go to the service and do it there so what I will do here is I would say all right I have a for example saver you could say local storage or LS saver and that is going to be an effect so here you could say something like use an effect just like this and this also takes a callback so in this one you're gonna make it a callback and the fun part is that if you put any statement here that do this or do that and it's based on a signal this effect would trigger any time that signal changes so if I just want to say here save this which is array to the local storage the magic would become so that whenever this wishes array changes the local storage or this whole blog would trigger again so I don't have to worry at all from where it changes Whenever there is a change in this signal I would save that to local storage and that's so magical because that's what I want so in this case I would say something like local storage dot set item here you could say something like NG wishlist in this case and then the value that I want to store or save in local storage has to be a stringified version of this wishes array so I would say something like Json dot stringify in this case and here I could go and say something like this dot wishlist array and then just this so I'm stringifying the whole array and then I'm saving it into the local storage with the name of NG wishlist so I'm just going to save this and let's see what happens so if I refresh the application and if I just go to the application here and go to local storage you can already see that we have this NG wishlist and it has all the three items that you can see here and now the fun part is that if I change anything at all it will be saved into the local storage for example if I add something new and hit add you see it just came here in the local storage and this is the one that I just added even if you try to Mark something as done or not because we are changing the signals it updates the UI it updates the computed value and it also saves everything to the local storage so if I mark this one as done see here if I click this the done here is true if I unmark it you can see that now the done is false for the same text so it automatically says that it reflects on the UI everything is working perfectly the only problem right now here is if I refresh the application this sets itself to the dummy data because my code is written as such so let's quickly fix that so I'm going to go to my service and in here while I'm saying all right the visual array is going to be the dummy wishlist I would rather say if I have something in the local storage use that otherwise use the dummy business array so I could go here and say this dot or I could say something like const here I could say const wishlist items or items from Storage equals and I can say something like this dot get items from storage and I need to create that function so I'm going to say I'm going to just copy this paste it here and then I'm going to say return and in here I could say something like items string so I'm going to first see if there are items in the local storage so I can say items Str equals local storage I have to use the same key and G wishlist in order to retrieve the items so I could say something like local storage dot get item and in here I could say NG wishlist just like this and then I can say hey if I have the item Str then I would do the Json dot parse items Str otherwise I would just return back this dummy wishlist array by default so now I could say something like get items from Storage which is returning here and then I would say something like this dot WL array or wishlist array equals signal and here I can say items from Storage so I can actually remove this one but I'm going to sort of just Define that this is going to be of a type settable signal so a settable signal type of business item array so I'm going to actually give this a type just like this so here and then here and then that's that and then I'm going to just import all the missing Imports so we got settable signal wishlist item and everything looks good so I'm gonna just save this now so if I refresh now you can see that I get the dummy data right now but if I go to sources and if I go to for example wishlist service let's see if our logic works so what I'm going to do is I'm going to put a breakpoint here and then here so let's add something hit add and if I refer fresh now it's going to come here I'm going to try to get the items from scrotage you can see that inside the application we have four items not the three default one so I have this custom one added here as well so it's going to find the item string just like this and then it's going to return the past array like this so now we've got an array of four items and now it's actually going to set that to the signal so we render four items not three and you can see that all the numbers are good everything looks good here I can Mark things just like this I could add actually more stuff just like this and then if I refresh everything persist because our code works like that so you can see one of the really good things about this is if I go to the angular Dev tools here we have the app wish list and then a lot of wishlist items and then we have the wishlist form as well the great thing here is that there's no output communication here that a component has to put the value out to the parent and the parent then has to do some something we have a signal within the wishlist service that does everything and everywhere we're using signals so I'm really excited for this even though this is in the early phases I'm really excited on how this is going to go forward and make this like seamless experience one of the questions that I have is how this is going to affect for example observables or the input outputs because there were a lot of questions about inputs being observables by default so having those signals there one of the things that we know is that we're gonna have some API to convert observables into signals and also the other way around so signals to observables so you can work with them and I'm gonna be really excited to actually see this with angular forms and what not so you can also tell me what do you think about signal so far did you like this video did you get to learn a lot about signals especially in the context of angular and are you hyped about signals as the other developers are just let me know in the comments and as always happy coding I'm gonna see you in the next video

Channel: Code with Ahsan

Views: 2,918

Keywords: angular, signals, react signals, angular signals, signals in angular, how to work with signals in Angular, angular signals tutorial, signals angular, signals angular tutorial, signals angular app, signals angular app tutorial, angular app tutorial with signals, signals example angular, signals tutorial angular

Id: IzMzjZXbeQk

Length: 24min 45sec (1485 seconds)

Published: Wed Mar 22 2023