Learn Angular Signals - The Future of State Management

in this video you will learn what is angular signals and how we can use it in the nearest Future [Music] so what is signals inside angular actually this is the new way of writing your code because previously result either just variables inside our components and we render them or we had streams with the rich chess and were also rendered them but to understand better why do we need angular signals I must tell you some Theory so how angular is working we have such thing which is called life cycle and essentially when something changes angular doesn't really know what changed maybe some event happened or some value was changed in some component angular is shown in digest cycle from the top to the bottom of all components and it checks every single component for the changes and as you can understand this is really a magical process because you don't need to do anything you simply change some values and then angular re-renders the whole application but when you have lots of components and lots of things to check angular becomes really slow oh this is why we're getting things like on push change detection which is not really a fix but more like a hack so angular bone check that much this is why now we have something new which is called angular signals so in comparison how change detection Works signals are working completely different you have a signal where you are changing the value and you have some consumers of the single which are notified directly when you change the value so angular doesn't need to Traverse the whole components Tree in order to check if we did some changes so this actually must print our angular applications on the next level so can we already use angular signals we can not but if you will install angular 16 and at the moment of this video we have a stable angular 15 then you can test it out which actually means you will get angular signals in the nearest Future this is not just something which is planned it will be released in the next version so here I have an angular 16 and let's try to create a signal here so inside our app component I just want to create a variable title and in order to do that I am writing word signal and as you can see it creates a signal inside our component and here we can give a default value but we're getting here is a setable signal of type string because we already created a title it makes a lot of sense to create an input and bind it to this title so we can check how we can change this value and read from this value this is where here I want to create input type text and here I want to bind a value how we are doing that we can use our signal title with round brackets this means that we want to read a value from our signal after this we're creating an event it will be key up event and let's create here a function change title where inside we're passing our event and after this I want just to call Title with round brackets so we can see the the value of the title inside our component now let's create this change title function so here we're getting our event of type event and now here we want to read a value essentially our title so here we can write event dot Target and we must type or set it to HTML input element dot value so we successfully got our title from the input now we must set it inside our signal for this we can call this dot title Dot and we have several methods actually three of them we have mutate update and set and actually set it the easiest we simply throw inside the new value overriding everything that we have inside this is why here I am setting the value and it is the title let's check in browser as you can see here is our input I am typing something here and here is the value directly rendered inside our template which actually means with the help of the signal we're ran under the value here inside our input and we changed it through this title set so this is the basic work with signal as you can see this is not difficult but now let's create this signal for our array of users so typically you will have something like users inside your component and this is also a signal and here we can provide a data type and as you can see on the top I already prepared user interface this is the way here we can set that this is an array and by default it is an empty array now let's say that we want to change this array in order to do that I will write implements on unit because I want to simulate that we are changing it from API so here we have our NGO needed and we can write here set timeout and just change a value after two seconds so in order to do that we can write this user set just like we did previously and provide inside an object with a d for example one and name foom what we can do now we can just console to log these users with round brackets but here we also want to increase our timeout for example to two seconds let's check this out I am reloading the page but don't have any users and after two seconds we are getting here I will use it with ad1 and full so now you know how set is working what alternatives do we have here we can also write this users dot update and actually update is working differently because we are getting here our previous state this is over here I can write previous users and we can use this data in order to add new element to the array for example here we can return just an array and here I am spreading previous users and after this I want to add an object we say D1 and name foom so as you can see here we want to use update if you want in your mutation to use the previous value and as you can see in browser it is working in exactly the same way and the last method here that I really don't like is mutating of our current value and in order to do that we're writing this user's mutate and we're getting here not previous value but current value current users let's say and here we can write for example current users push and here we want to add our user id1 and name full and essentially this code is completely mutable when not producing here a new value we are mutating our current state and in this case it is working in exactly the same way one more thing that you must know regarding signals will have the effect and if you are familiar with track we have the sh still which is called use effect which actually means we're triggering something when some value changes this is why here what we can do we can create title change effect and here we're assigning effect and as you can see it is also coming from angular core and here inside we're just providing a function which must do something in our case we can simply write here console log title change effect and here we can read the value of our title with round brackets as you can see here in browser we are getting first of all a single title change effect because on initialize we have a set and actually this signal initialization sets the default value and our effect will also be triggered additionally to that every single time when we are changing our title we are getting our effect because our effect is being running after updating of our value which actually means if you want to do some side effects this is exactly for that and the last thing that you need to know is computed here we can create something like for example users total and here we are using function computed which is based on some other signal for example here we can return a function and here we're writing these users with round brackets dot length and actually this line will create another signal of type number because we are getting here length and it is based on this signal users which actually means every single time when we update signal users this is our consumer and this user's total will be updated and after this if for example verb will render it here inside our template our template will also be updated because our signal changed as you can see in browser we are getting here one because we pushed one user inside our array so this is how we are using signal now the last question I want to share my feelings regarding signals in comparison to rxjs for example and actually I understand that signals is much easier for people to start than to start with the Rex chess this is true you can Master signals in 10 minutes but you can't really do that with the rxjs because there is a lot of knowledge to learn and a lot of different functions and combinations essentially rex.js is a super powerful tool but it is not suitable for beginners the main problem that I see is angular leverages rxts a lot and is using it inside a lot and now we're getting something completely new which is called signals and now the question is how we will use together angular signals edgex Jazz and if it still will be valid at all other will just throw away Rick's chess completely and just stick with the signals so from my point of view introduction of completely new layer of abstraction inside angular is questionable but this is what we are getting in the nearest Future and you need to know how to use that and actually if you are interested to know how to create Standalone components inside angular which you can already do make sure to check this video also

Channel: Monsterlessons Academy

Views: 8,580

Keywords: angular signals

Id: RLoACfLYwPs

Length: 10min 2sec (602 seconds)

Published: Thu Apr 20 2023