Angular Signals overview with examples | Angular 16 features | Nihira Techiess

Hello friends welcome to my channel teis in this video I'm going to provide the overview of angular signals we can start from what is signals so this is the new feature introduced in angular 16 for the State Management in other words for communicating data between unrelated components using reactive way okay so next we can see what are the topics I'm going to cover in this video and the first one is how to declare the signals and what are the data types we can use and finally how to use in our application and the second thing is how to change or modify the values in signals so basically we have three functions using that we can modify the signal values so the first function is set using this function uh we can completely replacing the current value and the second one is update so this one also mod modifying the current value the thing is it will take the W value it will do some calculation or a logical changes finally calculated value will be updated in the current signal State okay and the third one is mutate so it is directly modifying the current value for example if you are having an array it is having three records so now you are going to include the fourth records okay so that means the old data was there and additionally you are adding one new record in order to we are modifying the current state okay so next we can see two functions one is e effect and another one is the computed so this effect is a kind of function uh it is almost similar to the react effects inside the effects if you are using any of the signals if the signal state is modified this effect is automatically executed so in this real time scenario based on some value changes if you want to execute any of the Logics we can use this effect function and then computed so computed is almost similar to this effect function but the only difference is it will return some values so end result it is acting as the just signal okay and then conversion for doing the conversion we have two function one is to signal and another one is to observable using this two signal we can convert observable into signals and then using two observable we can convert signals into observables so in this realtime use case if you are dealing with an external APA we will get the responses observable okay so since you are using the signals you want to convert that observable into signals so then we can use this two signals okay so now let me go to the application we can start some coding practices so let me create one new component okay the component is created let me include in this routing side so let me move on the component so here I am going to declare one variable that is title signal overview so here okay so this is the normal variable I'm going to convert this into signal so for that what I'm going to do let me use the signal so in this inside the signal we can use this value and we are getting the error so this signal is uh belongs to to this angular core only signal so now this is fine here I just assigned on string values into the signal see now so we are getting response like this so the normal variable uh we can directly bind uh using this interpolation concept but since we are using this signals we have to use like this see we have to use this parenthesis then only it will work this is the Syntax for this signal So currently I just assigned on string value similarly we can have the integer or object and array we can hold in the signals itself okay let me do some more declaration also we can declare one array okay this is the normal array so I'm going to make this is the signal one also we can bind this array also this HTML side I'm going to use our normal dag only so here also we are getting the error so the thing is since this is the signal so then we have to use this parenthesis okay see both datas are get binded so similarly we can use uh any of the data type okay and next we can see how to change or modify the values I'm going to create two more components one is counter button another is counter display and also I'm going to create one service okay the service also created next I'm using this counter button component in the counter same way with this counter display so next in this button component I'm going to include two buttons and the color primary also the final option is reset so there are three buttons maybe we can include some space next in this counter display let me use one h2 tag we have to bind the value here so before that that let me go to the service so here I'm going to declare one value that is counter value okay using signal so the default value is zero let me format this one and then I'm going to inject this service in our component side next I'm going to find the value here the service. counter value okay let me make this into public so here also we are getting this function because this is the signal so we have to follow the syntax okay now it is fine the counter value is so the next thing is we have to include the functions here so in this button component increment so let me Define the function also and here also let me include the Constructor and also need to inject the service here and in this increment time so this dot service. counter value so as I mentioned uh we can use the set it is completely changing but in our case we need to update so first let me take the previous value and using the call back function so whatever previous value was there I'm going to plus one so we are just incrementing see know so the value is automatically increasing so the same way we have to for the reset and this uh in decrement if you are clear L noted so all the actions are happening from this button I mean this counter button component only so the final value only we are displaying in this uh counter display okay so let me try this decrement also see so our counter function is working finally this reset for this reset I'm doing this even1 binding so the same way so instead of the update I'm going to provide set so the default value let me provide three I just refreshed now it is for y again it is one once I'm click reset it is three so basically we can give zero so the next thing is if you reached the negative value we have to show one Aller okay so next thing is if you reached the negative value I plan to give one alert so in this case we can use the effect option so that alert also we can give it from the display itself I mean the display component itself effect so this one also need to import this service. counter value less than zero we can provide the alert one small alert okay and also what I'm going to do let me include one console.log we can see the actual value of this counter so if you are checking in this this console uh currently we have this zero only so when I'm clicking this increment button see the value is automatically changed at the same time if I'm clicking this negative see reach the negative value because this is minus one the same way again we are getting the minus value the third time so now it is reached the zero there is no and the next we can see the computer so before that we can use the mutate option also so already we are using this user array okay so what I'm going to do let me move this array into our service site okay I just added here and then in this counter component also we need to inject our services and here we can say service. user okay so the records are binded So currently we have uh two records okay so next what I'm going to do let me include one button here add a new user and then adding one event so here again accessing our service then user array do muted previous value enter ID3 okay anyway is a hard code value only so I just refresh the screen so once I'm click this add new user see the new record is created so this is the way we have to use this mutate and the next thing is computed for this computer I have to say two users added and in our counter component user count one variable here I'm going to use the option this. service user array. length Okay so basically this is also a signal we have to use like this it is showing zero let me verify okay see now it is coming okay so if I'm trying to click this one see here also the count is automatically increased it is simply calculated so here I'm just changing the logic if I put like multiply by 3 so initially it should be six it is varying accordingly so similar way uh we can provide our exact logic here we can optimize this computed fromy also okay so now we covered the set update mutate and also the C effect and computer the final one is conversion converting up observable into signal and also signals to observable So currently we have this title right this is the signal so what I'm going to do let me convert this into observable title for converting signal into observable we can use two observable okay if it is not coming then we have to import it manually rxjs in drop to observable here we need to pass our title okay then let me bind this observable into our HTML side already we have this uh H1 right so what I'm going to let me include the H2 see the response now so we are getting the object object because if anyone of the observable if you want to get the value then we have to subscribe this one so you see we are getting this object object the reason is this is the observable value so if you want get the exact value we have to subscribe this one from the HTML side for the subscription we can use the as synchronous F okay see we are able to get the same values so next what I'm going to do let me declare one one more observable I would say subtitle using the off operator we can say signal functions okay so this is the observable variable only here I'm just binded okay again it is the object object because this is the observable using this synchronous pipe see now we got the value so next I'm going to convert this into signal subtitle to signal and also I'm going to bind this one so then only we know the difference see now so both values are binded the syntax is if you are using the signal we have to use the parenthesis but if it is the observable for the subscription purpose I just included the as synchronous otherwise from the TS side itself we have to subscribe and assign the values to other variables so finally we have to bind it okay so this is all about the overall topics in signals so if you are confident about the basics then obviously we can work for any of the Logics so anyway in my upcoming videos I'm plan to cover one real time examples by calling the APA we can do the complete cred actions using the signals concept so still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 1,810

Keywords: angular signal, angular signals overview, introduction of angular signals, how to declare signals in angular, what are the datatypes we can hold in angular signals, what is signals in angular, difference between signal update and mutate, signal set vs mutate, what is calculate in signals, effects in angular signals, convert signals into observable, convert observable into signals, difference between calculated and effects

Id: q68YP-yXCZM

Length: 22min 5sec (1325 seconds)

Published: Mon Oct 09 2023