NGRX Signal Store | Signals in Angular for beginners | Angular state management with Signal Store |

hey everyone welcome back to my YouTube channel so as you guys have already seen the title of the video and as you can see in the header also that today we are going to learn something about ngrx signal store which means we are going to build the same functionality what we have did in the past three videos by using signal store and we will see how we can make the same kind of a feature by using ngrx signal store and yes let me tell you that by writing very less amount of code and that really allows me to tell you the Fe like one of the good feature of the NG signal store is that write less and do more so before starting with the coding part let's first understand that what is this signal store so this ngx signals is a standalone library that actually provides a reactive State Management solution and a set of utility for angular signals okay so if you want to learn this NG signal store so I would say it's a small prerequisite which you should already know before starting with this video the one thing which I really highly recommend that you should know what is signals in angular if you don't know this angular has released signals in version 16 uh second thing you should know little bit about the ngrx you guys already know it because you have already followed my video and this is part four of angular State Management and the third thing what I will recommend you guys you should have a fundamental idea about what is State Management in angular and why do we need it okay so if you want all these three information so I can provide that in my YouTube videos so you can just head over to my YouTube channel and you can search for signals in angular and how to use it in angular project so this project I will highly recommend you that I have made this project by using angular signals so this will actually help you to understand about like what a signal how to use them what is set what is update what is computed nfx okay so this thing will be clear by this video and if you want to know more about the State Management thing so I have already started a playlist on my YouTube channel which is ngrx State Management so here you can find all the parts like I have about three parts created for the ngrx store and this is the part four where I will be talking about ngrx signal store okay so I will be talking about what problem we have faced while creating this application and how we can solve it by using ngx signal store so now let's start coding now let's open up your vs code and let me open up this here so this is what I have my application already so this is I have a counter component so let me open up that counter component okay and this is what it looks like so currently this is part of your ngrx store so what I will do right I will take uh 5 minutes of time and I'll try to explain you about what is signals in just like I'll just try to what is the set update and all that so that things get quite easier for you to understand once I'll teach you the signal store okay so here if you see right I how do we create a signal so it's quite easy you just have to import it from angular /c signal and I'm creating My First Signal which is count is equals to signal and this is how I initialize my signal so now this will be my signal and if I want to display it in the UI so how will I do it I'll just go here and let me remove this a sync one I can change it to count okay so now this is my signal if I save the changes I should see see Zero here because that's what I have initialized the signal as now if I want to increment it okay so what I'll do uh let's not use the signal store anymore so don't get confused so let me remove these three methods so previously we using the signal uh ngrx to do the job but now let me just do it for this component only So currently I want to change the state of the component okay that's why I'm removing everything from the ngrx okay so now I have these three method and I want to use a signal to do the increment decrement and reset okay how can I do that so to increment it right so what I can use I can use something called as this dot the count which is my signal and when I say dot I'll get something called as update okay so I can make use of this update so what update does so it basically takes a update function or I can say the current number okay the current number what the signal value is so what I need to do right I just need to return the number okay and I want to manipulate it by adding it one because I'm doing an increment okay so that's what the increment thing does now if I save the changes anyway I'm calling this method on the UI with this increment and if I click on this increment can you see my signal is changing that value so one thing to note here that I have make use of a method kind of thing and that's how you call a signal okay if you just do this do count it will never work okay and you can see this warning also okay so count is a function and should be invoked so that's what it is so this is a signal it's a function okay now what you need to do so this is how the increment is so for the decrement I know you guys can do it now so it's quite easy and straightforward so just for decrement just do this and you just need to minus one and that's it save the changes and this should also work so if I do increment it increases if I do minus it decrements the value also now what if I if I want to reset it okay so there is something called as this do count which is my signal dot set so if you want to set the value okay if you want to reset the value so what you can do you can directly set a new value to your signal and if I say it as zero so what will happen to my signal my signal will become zero whatever the value was it will don't care and it will just reset it to zero like for example if I say 1 2 3 4 if I decrement and if I click on reset this will reset my signal and the value becomes zero again okay so this was just basic things about signal like how do you create the signal how do you make use of update and set functions now let's talk about something called as computed and what this computed does in signal so suppose here I have a requirement right so let me just copy this and let me just paste it down and what I need to do right uh this will basically help me to display the single count which is the single one 2 three and just below this I want to display something called as double count okay so that's how the UI looks like let me rename the change okay yep save the changes and now let me show you the UI and then we'll try to uh do this requirement so if I go here right so when I click on increment so here I want to see but the double should be two if I say two this becomes two this becomes four okay something like that okay okay so how we can do that so we don't need to create a separate signal and do lot of imperative code here and there so we don't need to do those logical things so what we can do right we can directly make use of something called as computed so suppose here I want to create a new signal which is double and I will make use of computed okay so this computed will help me to do something like that change so what this computed does right basically it helps you to can you see it's written over here so creates a computed signal which derives a reactive value from an expression okay so that's what you need to pass the expression as so this computer what it will do right so whenever there is a change in your signal which means this. count okay whenever this guy changes do one thing do a computation and make it double okay so that's how I will make it as a double and now I can use this value now again this becomes a signal can you see it's a signal of a number okay now I want to use it over here so now if I say double and remember use these two brackets because this is a function now now if I save the changes now let's go on the UI and see the magic of signal okay let it get refresh okay it's getting saved y everything is okay now now if I click on increment I can see the single is one and double is two okay and that's how you create and that's how you make use of computed to get this thing done all right so now let's discuss about the last thing what is pending over here which is effects okay so first of all what is effects in the signal so the first thing first is that signals are useful because they can notify the interested consumer like when they change correct so to notify the consumer for example if I want to tell that hey my single got changed my double got changed okay so to do such kind of an operation so an effect is an operation that that runs whenever one or more signal value changes okay so what you can do that you can create a effect to do such kind of a job so let me show you that so if you go here in this TS file Here and Now what we will do we will make use of effect so over here I will be creating the effect in the Constructor so I'll say effect so which is coming from angular / core okay and inside that right you can have your effect function and what we will do right let's open up this bracket and now here I will say console.log okay conso do log and I can say that my signal is changing or you can add anything okay or something like this let's add something like this the current value is the current value of count is and you can make use of string concatenation or string literal is up to you this do count okay and now if I save the changes uh let's see in the what happens whenever the count is changing so now if I inspect element here and let's go in the console let me remove this unnecessary things and if I click on increment can you see I'm able to log it in my console that let me Zoom this a bit okay let me remove this yep so now if I click on increment increment increment increment I can see that I'm able to log all the values whenever the single is changing okay so that's what the magic of effect is so whenever you need to log or you need to notify like someone is interested in uh catching that particular event so that you can do that by using effect all right so that's all about what I can cover today about what is signals in angular and all that so if you still need to know more about it so you can go on this website angular signals and you can read about it it's there in the official documentation of angular so you can know more about it if you want okay all right so now let's come back uh to ngrx Signal okay so to use the ngrx signal in your project you need to install few stuff so let's go on this website ngrx signal okay maybe you can just search about it signal store and you can get this link over here okay so what you can do right you can go head over to the installation part and you can do something like this okay ngrx install and whatnot okay so let's copy this first one and let's go in your angular project and paste it NG add ng/ signals atate latest yes it will all say yes and then let's proceed to install the package so as you can see the package is installed and it has also updated the package. ZN so let's head over to the package. and see if it is installed correctly yes I can see it is there so once the package is there let's go into your States so as you remember like let's do one thing let's start uh let's take baby steps okay so we have already created the counter application by using the ngx store so what we will do right we'll try to migrate this ngrx store by using the signal store okay so let me create uh one more folder here and the folder name will be stores this time so state is for ngrx and store is for the signal okay so we have created a store folder and in the store folder I will be creating my first store which is my signal store or or maybe I can create give a good name to it by saying it as counter so I can say counter. store. TS all right so this file is ready and now we have to start creating our state I'm quite excited to be honest so let's see let's first create how your like counter state will look like okay it's a very easy application counter application okay so for that what we need to have we need to to create the interface which is for our type type definition so which is counter State okay and what this counter state will have it's very easy right it just have your count which is of type number that's it and now the second thing you need is you have to initialize your state so I can say like const initial counter State okay uh sorry if I do some spelling mistakes H counter State and what is the type of this the type is what we have created on the top which is counter State and we can initialize it by saying count equals to Zer okay something like this so now these two is ready we have a interface and we have a initial counter state so now the real magic begins when we will be creating the store so to create the store what we will say we'll say export const and let's give the name of the store which is counter store and how do we create this counter store by making use of signal store and the signal store is coming from ngrx SL signal okay can you see it is inputed on the top as well to create the store let's open up this bracket now and just below this this guy require some functions so that's why it says function F1 or something like that so let me give it the first function so to create your store right you have to first initialize it okay so what I will say right my store is having the initial state so I will say with State can you see this is again a method a function F1 so function I just added it and in this state what I can do I can just pass in the initial counter State what I have created okay and now just after this what I will do right if you remember when we were creating it in ngrx store we have created some actions okay so if I show you the states and over here we have counter so we have few actions here right increment decrement and all that so don't you think this is nothing but some kind of a method which you want to execute and once the action was triggered the reducer comes in picture reducer does the magic behind it by patching some values and all that so we are we have have to do something similar over here as well okay so we have to create some method I'm not saying action we have to create some method okay so how we will create those method let me tell you that so just press comma here and you have to specify with methods okay with methods and inside this right you have to destructure your count so what I will do right I'll say uh store and just after that I have my count okay now with this what I will do right okay let me open up okay this has to be as an object okay and now what we will do we will just try to return return what this methods will return few things so let me just do that also so over here so I will have this bracket now and inside this right I will create those methods so my first method would be increment so I'll say increment okay and the increment method will do something so whenever someone clicks the increment method I have to patch a state okay whenever I do increment I want to do some manipulation for my current state right so I'll say patch State and again this patch state is coming from ngrx / signals okay so Pat State pass in your store which you have on the top okay so from this store what you will do right you will say that okay please update my count so how you want to change the count if you remember in the in the component when I was using the signals so you have to do something similar so you want to change the count by saying okay take my current count which is a signal and please add one okay so once you do that right your things will get changed okay I did a mistake over here so this has to be swapped if I'm not wrong this has to be count and this has to be my destructure store okay yes I think that's what it was complaining here yeah I'm correct because here you have to pass in the signal okay which you have the value which becomes the signal and now that's how it is so now you will have your count and that's how you patch the state okay now for you need the second method again so just press comma because this is with method so I just created one method let's create the second method uh this will be nothing but my decrement so let me just add it decrement and with the Pass State it's quite easy right pass in your store and destructure it and in the destructuring you will have to update the count like update the state of the count and now I want to say minus one because it is a decrement and suppose if you want to do reset again the third method will come in picture and over here you will change it to reset okay reset what you have to do you just have to make the count as zero and that's about it see the magic right so I can say that my counter store is ready so now can you see the difference between by using ngrx store and Signal okay so with the ngrs signals what you have to do you just have to create a single file and this guy will handle everything for you but in case of the ngx store you have to create action reducer selector and whatnot okay so this was just the creation part let's see how we can use them in your component so to use it in your component let's go in the counter component over here and what I will do right okay so you don't have to uh view all all of this huh so let me remove this thing for now let me remove this thing also okay let me remove the effect let me make it quite clean how it was previously okay or else let me just do control Zed so that it is back to now because we are trying to migrate the old into the new right so let me just go back and do all the undo things so if you remember this is how the signal store was working sorry the ngrx store was working so for the signal store what you will do you will just say counter and counter store let me give the name exact name and you'll just inject it as a service so you will say counter store okay injected successfully now what you can do right so whenever you are clicking right so currently what I'm doing I'm calling this method increment and this method called store store. dispatch dispatch will dispatch a action which you have inputed on the top so now now I don't need to do all of this so what I will do here directly so whenever someone is clicking what I will say I will say this do counter store dot can you see I have access to something called as increment so I will say increment okay so for this one what I will do again easy peasy right so just copy this and paste it below to to uh call all those actions okay so over here what I have to do I have to say this do signal store do decrement okay the spelling is incorrect let me make itre right and for this one uh again you don't need to call this I'm just doing it for the sake of it so you can directly call counter store do reset okay and that's about it that's about it now you have to also uh like use the value so to use the value again let me remove this guy I will say counter store do count and that's it okay let me commment this code for now so that it is not blocking us now if I save all the changes okay let me save all the changes and let's see if everything is green yes I can see it's screen and now let's go here and open up your project okay so this is my counter project oh there is something failing let's see what is the error oh okay so this is saying something about no provider for Signal okay so I know what what is the mistake what I did uh so I would like you guys to like tell me about this error so you can pause this video you can guess about what could be the error and please mention them in the comment let's see who gets it right okay please don't cheating H you have to say it right because I know what is the problem so you can just pause it and answer it down in the comment I hope you have did it so let me just go and fix this issue so if I go here in the vs code so if you remember right what I'm doing I'm trying to inject it something as a service yes or no and I haven't mentioned it that this is a providing root or what and what not so what I can do that I can like let my component know that this is a provider because okay so you have to pass it in the provider's array that I'm using something called as counter store so let's add add it here like this and save the changes and it should be all green all right compiled success let's go back to your project and let me open up the route which was counter I can see that my counter store is working fine let's click on the button let uh to just to confirm that everything is good so if I click on increment I can see the value increments decrement it works and if I click on reset it will reset the value now if you remember right we have did something called as computed State for the component itself but now it's a global State kind of thing okay so now what I want to do right again I want to do something similar uh so let's go back and uncomment this code so do you think is can is it possible to do that by using signal store so the answer to that is yes it is possible and let me tell you how we can do something called as this. double so for that let's go in your counter. store. TS file and over here right we have something called as fifth computed okay it is something similar right what we have just seen the computed thing okay so we will be using something similar here also so this is with computer and inside this what this can do right this can access your count which is your signal and this will return some computation so how can you return that so it's pretty simple and inside this you will create your new signal so let's give a name here which could be a double count okay double count and now how we this will get the value this will get the value from computed and if you remember when I was teaching you computer this creates a signal correct this creates a signal based on some computation so we will be doing something similar here so what we can do we can access the count which is above so count into two that's it so now this will multiply the count and this will send the return you just need to press your comma because this has this is all the methods which is coming which is inside the signal store this is all comma separated that's what comma separated method one two and also this with with method so now we have these three method with state with computed and with methods to do the job for us okay so now I can see that my double count is also ready which is nothing but my signal and now I want to use it in the HTML of the component so over here we have already injected the counter store let's go here and let's remove this and let's add something called as counter store dot double can you see now we are able to access the double count and that's it now if you save all the changes let it get rebuilt everything is in green let's go back to your project and now if I click on increment can you see I'm getting one but here I'm getting two again if I increment can you see the magic of your signal store which means that we are able to do something quite new and latest what what angular has provided like uh sorry ngrx has provided to us and if you click on reset see everything is in sync now so that's how you create or that's how you migrate your existing ngrx store to ngrx Signal all right so a lot of you can say that come on sh this was so easy example just a counter applic a and all that so let's try to do something extra which is something about migrating the cart okay so if you remember we have cart actions where we have add to card we have increment product decrement product remove item this reducer things and all that so let's try to do for the cart okay so again we will try to follow the same steps how what we have to again this is quite easy and let me just try to do this one in into like step by step so to do that right what is the first step you have to create a file first the file name will be cart do uh maybe let's give the store name again store. TS okay so first thing first what you need to do you have to first declare your uh maybe you have to create the type okay so let's create that type by saying export export interface and let's give the name as card State okay so what is the type will be it will have only products for now so I'll say products okay and this will be of type product I think I have already created an interface so let me use that product I hope I have it I product yeah it is I product okay so this is what the type looks like card State and again we have to initialize so for initializing I'll say const initial card State okay so initial card State let me change the spelling make it correct what is the type of this the type is card State what you have on the top and initialize the value by saying products and this will be nothing but the empty array that's it okay so this thing is ready now step number two you have to create the actual store so while saying export const give the name as card store and from by using what we are making this store it's by using signal store we are making this so use the signal store okay now you remember we have to first give the state the initial state by saying with state so we'll say with State and we have to just initialize it so I'll say initial card state okay this is also done step two we have to use all the methods so remember we have actions over here in the card those actions are let me just count them we have add to card we have increment we have decrement remove item and all that so let me also create the respective uh what do we say methods for it so the first how to create a method by saying width methods and inside this width method what you can do first thing it should be your signal which is your products and the second thing will be your store which you will destructure it store and now you will have to return by saying like Okay so inside this brackets I will create all my method clear so let me create my first method which is add to cart okay very easy one so what what we have to do while calling this add to cut we I'll have to pass the product which is of i product okay and this is a method so let me call that like this okay so now what you will do right you have to update your product by adding an extra item so I'll say const updated product okay and inside this let me let me use the existing signal whatever the product value I had already okay the products the products value I had already and please add this extra one inside it okay and once this is done right what you have to do you have to patch the state so you'll say patch State and inside this patch State you have to pass in your store first and sorry let me remove this this should be store not set time out pass the store and inside that store you will have to add your products products by saying which get updated to updated product okay and that's how this will look like I don't know why but this is always there let me just check why it says one argument but got two oh all right so there is a very big blunder what I did here so this should not be a signal State this should be a signal store so guys please make sure you're not doing such mistakes what I just did now okay so this should be a signal store and can you see now everything is happy like everything is all good all right so that's what it is so now we have a width State and now we have width methods with a first method which is add to card okay so this width method can accept comma separated method so I have add two card created let me do it for a remove item okay so to that again let me create the same thing remove item okay so this is nothing but the actions and all that what we have created in the ngrx store so this is the method here so this will be of type ID and ID of type string and over here this is a method so let me just do some uh like logic operations here so what I will do right again here const updated product okay updated product so I will have to filter out it from my array so I will say products which is my signal do filter okay filter and from this filter what I'll do right a we can take any argument here so a do ID should not be equal to okay should not be equal to the ID what user has passed and this will filter out that particular value you okay and yeah of course this should not be a string right so this is a number so this I have to change it to number I'm so sorry all right so that's how it is so now this will filter out the product and this will uh update this array now what we will do right we will just go ahead and Patch your state whenever I remove some item I want to patch the state for patching pass in your store okay so pass your store and in this object you can just update your product so I'll say product will get updated to updated product okay so in this way your remove item is also done so if you still know like how I'm getting all this logic and stuff I have already did it something in the reducer if you go here can you see I'm already doing something similar over here so the logic is the logic will still remain the same okay now let's go again in the card store and this is the second method we have let's do the increment of the product quantity correct so I will say increment okay so increment again this will accept the ID of the product which is of type number and this will be our method again something similar so I'll say say const updated product and in this updated product you will just say products which is your array signal this is a signal so that's what I did like this bracket and Dot anyway your signal is an array right that's what it is so array dot we have something called as map now we have to uh map some different value right based on some filters so what I will say right array do map in that I will have product single product so what I will do right I will check if my product do ID is equal to equal to the ID what user has passed if yes if this is the case then what you should do you should say that okay take this product okay destructure this product and inside that you will get something called as quantity okay change the quantity to one so this will be your quantity and how can you update the quantity by saying product do quantity + 1 okay that's it so now this will change the quantity value okay just to be sure that the spelling is correct yeah it's correct this will what it will do or else if that is not the case then please go ahead and return that product itself okay or else this is your or condition okay sorry sorry this is my tary operator so this is complete is my single object so this is if it is true then do this or else just return the product okay just return the product itself because no filter got was matching okay let me format this code yeah so now that's how it look like this is my tary operator okay if true then do this or else return this by default all right so now this is how my updated product will get changed and once it got changed we have to patch the state patching the state pass in your store and then you will say product and update it with the updated product what you just change it here okay so this is what your increment was so what do you think the decrement will look like similar right let's copy this whole code go over here and this will change to decrement that's it and now this will change from The Path State right this will change to minus one that's it so you just have to decrement the product and save the changes and now what I can say right I have my methods ready which is add to cut remove item increment and decrement of the quantity okay now I will have to use them correct I will have to use them in the components so let's go in your card components and let's try to use it so let's go over here go in this component you know right what you need to do so to to use it right you have to call the cart store and you have to inject it so for injecting you'll say cart store okay so you need to add it in the provider okay so now let me just tell you right rather than adding it in the provider what I can do right because I know that this this will be my Global State like this so what I can do I can create a global instance out of it like how can you do that in angular by using the dependency injection and stuff so you remember whenever you create a service and you want it to be accessible globally so you say provideing root something like that so something similar what your signal store also provides so be whenever we create this store right on the very first line what I can say I can write here something called as provide in okay I can write something called as provide in okay provide I don't know if the spelling is correct provide in and I can say it as provide in root and that's about it okay uh let me check if I think it's provided in if I'm not wrong let me just check if it is provided in okay let me format everything yes looks okay to me yeah so it's provided in and if you're not sure what what is it so you can just make use of uh injectable remember injectable this is what I'm trying to do here if you remember when you create a service injectables comes in on the top and that's what you do providing root okay so something like this I have to say it here so can you see the spelling is correct so I think I'm okay let me remove this all right save the changes and now here you don't need to say that providers and all so now you can directly inject it like like a service like a global Service how you do in angular and now you have to update few things in the HTML so over here right you have to increment you have to do decrement you have to do whatnot so what I will do right first of all so it is not coming from the cart item so now the cart items is coming from the observable store and all that so can you see we created the store and by using the store we are updating the cart items and all that see the store do select and all that no need to do this now what you will do you'll directly go here okay let me remove this whole line and I'll say card store do your products I think I should have given a good name to it I think it should be cart not products okay so you allowed to do the change it's all up to you I think it should be card store. carts cart items or something like that okay but I just added products I don't know out of mistake so you can change that it's fine so save the changes okay now you have another methods which is increment remove item and all that so what I will do here so I will change it to card store store do remove item and this remove item accepts an ID so the ID is from item. item. ID that's it so the second thing was the increment of the product so here increment and decrement so I will say card store do decrement okay decrement you have to pass the item. ID that's it so item. ID same thing for here also so what I'll say card store do do increment so let me just delete this line yeah so it will do the increment let me save all this changes and let's see how it works so okay everything is green let's go back on your code and this should be my cart okay the card is empty it's fine because there is nothing in let me go on the homepage the homepage is the list of product so now if you see right if I try to do add two card see it should work right so now it is adding the item in the card can you see the card got updated and wo there is nothing over here why because there's something wrong in our code let's see let's try to fix that but see the count is increasing and I can see the total amount also here here all right so now let's see what was wrong there so if you see right we haven't did the add to card here to be honest we just uh checking all the products and all that add to card will work in the products page correct so that's why I added it as a global store now so that I can inject it here also I can say card store is of uh type is the same so let me just inject it directly provide the provider token which is card store okay and now this guy will do the addition of the products if I am not wrong okay yeah something over here can you see we have handle add so this guy will help me to add the item so over here right now I don't need to use this guy so what I can do right I can just say this do card store do add to cart okay and in add to card I can pass my product which I want to add okay and save the changes so now this is using card store not the ngrx store so this is the signal store let's go back let's go to the products page again and now if I click click on ADD add add okay let's go on the card page oh it's still empty let me see what's going wrong okay we can check that in the inspect element over here right if you see this cart items takes the total count so we have to also update this also so let's go and update that so for that let's go in the app component is it it's somewhere over here can you see the card products. length and all that so again here you have to inject it so I will inject counter sorry it's not counter anymore it's card store and I will inject it by saying card store okay and this will change to the length now so remove everything till here okay and now what I can say card store. product do length Okay so now this will check for the length save the changes now if whenever we add it so now it should actually update the number also okay let's see if that is doing now or not so let's go back and now if I click on+ one can you see again added again added so which means there is the cart is somewhat working but we still need to work on the display part so now if I click on this card to page I have to handle this thing now okay I know this is because of ngf or some some kind of thing I have did it there okay so now I can see there is item which is getting added all right now let's go back to your cart and over here as I was telling you we have a if condition because now the observables we are not using the observables correct so now we are using the store card store Dot now you have your cart item which is your products sorry products is equal to equal to zero if this is zero then you can say that uh that uh no product exist something like that so now we are using the card store rather than the observable of the ngrx okay save the changes now it will show this or else it will show your products over here so now let's go back again let's go to the product page now if I click on add to card add to card add to card so I clicked three times I can see three items now I go here can you see I I'm able to get the three items over here now let's see if the increment works so if I click on this yes increment is working if I go back yes it is working increment is working decrement is working but now I see a problem which is the total amount because currently this total amount how it is calculated it is calculated by using the computation done in the ngrx okay in the ngrx store so let's see where is it yeah this is the one so now if you see here this total was coming from the store so we have to somehow do something in our code to get this value also from the card store which is created by signal all right so let's go in your card store. PS and in this file uh you remember we were doing something called as computed so now this computed will help us to do that magic so now we'll say with computed okay so in this with computed you will have to add the logic so now what I'll do I'll just take the products okay which is my signal and over here I have to return it so what I will say I have to create a new signal which is my total amount or I'll say total price or something this is my new signal total price and this will be generated by using some computation so I will use computed coming from angular / core this is part of your core signal all right so now with this computed I will have to call some logic to calculate okay to calculate the total price remember we have created this method calculate price okay so this guy only needs the product which which you are adding okay so what I will do right I will just need to add the products okay this product is coming from where it is coming from the top so this product we just need to add it as a argument all right and let me just press the comma here it's a comma separated okay also to fix this issue I think it's saying the argument of t Okay so a small mistake over here a typo issue that this has to be like this an arrow function okay that's it now people can ask you Shashi from where did you get this calculate total price okay so if you know if you want to know about this I have already created this method maybe in my part two or part three or you can just go ahead and check on the playlist so this is what this does this basically calculates the total price which I have created it in the cart reducer so you can actually encapsulate into a separate function or so that this can just return the total price or something like that okay so I'm just using this by default created uh calculate total price Method All right so now if I go in the store that's what I'm using so now this computed will do some computation and return something called as a new signal which is a total price which spelling is incorrect so let me make it correct yeah total price and that's about it now we have one more thing over here total price now let's see how we can use it so let's go in the card. HTML we have already injected the card store over here so now we can replace this observable store by actually using the signal store so we have the card store okay dot now can you see you can make use of total price so total price it's a function so now that's how you use a signal by adding this bracket and you are still using the currency price so that it it should be in dollars let's save all the changes and go back to your UI let's go back and now if I click on add to card add to card add to card so now I can see three items there in the card if I click here on the card I can see all three are reflecting here with the correct total price okay if I try to add some more quantity can you see my price is also getting increased so now I can say that everything is in sync now if I remove the item see it becomes zero so can you see now if I show you something very weird thing right if I click on this so it is become zero what I want to do right when I click on this minus it should be removed something like this if I remove can you see it works it works so let's try to do that now so to do it right let's go in the card component.ts and what I can do here I can call this decrement logic uh directly in my uh component itself let me just do that so I will say here decrement okay we will use the existing method of the decrement but what I will do here this time I will pass two things first of all I will have to pass the item. ID correct and the second thing I have to pass the quantity so the quantity you will get it from item okay so this should be the part of item dot the quantity okay so this you need to add it in your method also so this will be your your quantity and this is of type number if I'm not wrong so what I can do right Whenever there is a decrement happens I will check for the quantity so if if the quantity if the quantity is equal to equal to 1 if this is the case okay then what you need to do you have to remove the item if someone is using that so I can say this do card store do remove item and you just need to pass the ID by saying item item do ID oh sorry I'm doing the mistake you just have to pass the product ID from the top that's it okay or else you will have your else condition correct the else condition will be nothing but uh this is what it is doing previously also so you'll say this do store the card store Dot you have to decrement so you'll say decrement the product and pass in the product ID and that's about it so see it's simple easy peasy right I can remove this one because this is part of the ngrx thing all right does it make sense to you like the quantity is one then please remove the item or else decrement the item till that extent so now if I save the changes save all the changes and let's see if that works so again let's go back to your application go back to the product and add add and add I see three items now if I say add okay works if I go here if I again click on this minus can you see it removes the product and everything is in sync now let me just prove that by actually removing this product also now can you see it's 22.30 if I say two quantity I can see 44.6 which means that everything is in sync Now by making use of ngrx signal store and let me tell you the advantage now like after completing the whole video now can you see the change now like what kind of change I did to achieve this by using the signal store I just have to make a single file okay and in the file I have to create my respective methods and I have to manipulate it based on the logic and that's about it okay and that's about it this is how simple it is if you compare it with the ngrx store if you see the ngrx store which I which is there in the States you have to create action then you have to create reducers you have to add up all these Logics then you have to create a selector to select your it and then you have to use them in the component and those are nothing but your observables so you have to make use of async pipe and you have to sometime do some imperative code and whatnot but can you see the advantage of the signal store it makes your code more declarative okay which means just by those declaring like what you need okay rather than telling them how are you doing you are actually telling what you're doing okay it's something like that so it makes your code more declarative and that's what the best advantage AG what the signal store adds in your application all right guys so that's it from this today's video where we have learned something interesting which is ngrx signal store and we have also saw that how can we make use of that in a project so there is still one topic which is the effects you remember like we were using ifx to do the API call if you want to know more about that like how can we do that with the ngx signal store then do let me know in the comment section because I know this video is already about 45 to 50 minutes so I don't want to stretch it a long so if you want a separate video about that so do let me know in the comment section I will be creating it for you for sure also I will request you guys to do like this video because it takes me a lot to bring such a content for you guys so a like will be appreciated and make sure to subscribe to my channel and share this video with your angular enthusiastic friends who are actually learning about how to use State Management in angular so they will know about the latest way of doing things correct so do share it with them also and also talking about my new new upcoming videos that I have already created the mean stack uh this blog project so the API side is ready so if you want to learn this project from me then then you have to subscribe to me correct so yeah so please do that so that I will be sharing this video very soon that the API side is done so I'm just working on the front end part of it and once it is ready I will be like bringing two part for this video one for the API side and one for the front end side and I will tell you like how can we create a blog project from scratch by using means stack technology or if you have any other request uh video for me then do let me know in the comment section or you can connect with me over Linkin telegram Instagram and you can let me know there also like hey Shashi I need this topic can you do that for me I will definitely going to do that for you guys all right then so that's it from this today's video until next time see you bye-bye and keep learning guys

Channel: Let's Program

Views: 5,155

Keywords: NgRx Signal Store, Angular State Management, Reactive Programming Angular, NgRx Tutorial, Angular Development, Simplify State Management, RxJS, Functional Programming Angular, Web Development, Frontend Frameworks, State Management Tutorial, Improve Angular Performance, Angular Best Practices, Learn NgRx, Reactive State Management, Angular Apps, Developer Tools, Coding Tutorial, Software Engineering, Application Development

Id: Szmkp5xxOUo

Length: 45min 49sec (2749 seconds)

Published: Mon Feb 12 2024