Angular is planning to introduce some very revolutionary concepts in its next version, now Angular will have a reactive creative of its own, which is Signal, which was introduced by RyanChariodes in Solid Jus, without a single part of this video. Ad tak dekhna aur ek video ko bhole na bhole aur abhi ki like video aur abhi hai ki kahanal ki first time na bhole subscrib karna so mera naam hai aur aap aur rahi hai US [Music] Welcome back to friends talk What is Signal, then Signal is a new reactive primitive of Angular. Reactive primitive means that it returns a function whose value is always recalculated whenever something is updated in a dependency related to it. This means that it can be assumed that Signal There is a new type of property in which we can store some value, but this property is not a normal property, it is a reactive property that whenever the value of the property changes, it notifies its subscribers, that is, wherever it signals The property has happened to it, it automatically reflects the change, whenever there is a change in the signal value, then it is a reactive property or you can use reactive privacy, then signal is equal to property plus change notification. Now, what is the benefit of signal? Before we understand a little about change dictation and what you have thought about in the big part of GS, how Angular detects the change and updates the view, like if we change a property, that change also shows in our view file. If it starts happening then it is called Angular change dictation for which Angular does that to the GS library, so as you know that Angular application is in component based architect, what does John GS do, the detector is relieved whenever something in the up If this happens, it triggers the CD, which means it triggers the change deduction, after that all the component TVs are checked to see which component's view will be affected by the change, and the view is updated according to the new state. What happened, whenever there is a small change detector, then the whole component of the up is checked in the TV, which has a lot of effect on the performance of the up, so I will tell you in a simple word, like mother, if you have ordered something online, then what The delivery is day after day, if you are not interested, then he will go to every house in your area and ask if the order is yours, then by doing this, he will finally get his address, but he has disturbed everyone, which was not necessary. If he had that particular address, then as I told you that when change deduction is done, then there are many unnecessary checks in the up. These unnecessary checks can be avoided with the help of a signal when there is a detector of any change, and the up The same part will be updated in which there is a change Signal triggers the update only when it is necessary Repeatedly unnecessary checks are not done in the entire component tree so that the number of change deduction cycles are reduced and performance is improved Now friends signal to do it For if you already have any angular project then you have to run this command c update @ angular slash bud space aate angular slash kar hifin hifin next so if you want to try signal then I would recommend you to start a new Try this by creating a project for which we will run the command nps @ angular slash bud@new then your project name example signal project so I copy it now we go to our folder where we have to create our project then we Now what we have to do in our folder is to click in the address bar and write CMD, this is the shortcut of command prompt, if you do this, command prompt will open following this text, then friends, create our signal project. done now what we do is write here enter cd signal project now if we have to open this project directly in vs code then its shortcut is code space dot enter now friends i am going to setup the project quickly Like I have added bootstrap etc. to it and I have made the initial components etc. so that we do not waste our time in it, so friends, I have set up the signal project, it is running here, now as you can see, The initial component is for its UI, I have included bootstrap in it and how I have included bootstrap in it, now I have included it quickly. This CDN link has been pasted in index.html, now friends, here I have created a component, which is com one, it is not getting signal here, now it is getting only normal property, what did I do? Have a table in which first name last name and full name show and below there are two fields in which we can change first name and last name we go to its file so in file I have taken two properties first Name and Last have another property Phool Naam Phool Naam mein kya kiya first name plus last name ki yahan pe phool naam kya aa raha hai first name plus last name Anoop Sharma and here I have created two method one first name To change the last name, now we go to its HTML, so here is this table, in which we have entered the first name, last name and full name, and after that here is the input field, in this we have entered the temporary Have passed the difference and here this is also the method change first name similarly here is last name so now what happens whenever we change first name like meet John I change then you see above John changed And here there is no change in flower name if I change last name here then last name is changed still there is no change in flower name so this is normal property now we create another component where We will not do this normal property, but we will do a reactive property, which is the signal, so that whenever we change anything, it will reflect the change wherever it is happening, so I will quickly setup its component. Let me [music] So friends, now let's do that signal for which I have made another component com tu karke and pasted the entire com one's data in it now how do we make the signal ab jo yahan pe hamari first name And there is a property called last name, we create them, we have to write a signal property, first name, it's equal, I cut it, let's go to signal, and import signal from here, Angular Course, so it will be imported from Angular Course, now it's After that we have to put the thesis, now the most important thing is that there is always an initial value in the signal, so we paste that value here, now in the same way in the last name, we write the signal and this string is put in it. At the moment what do we do, comment them that we have just created the property of the signal, that is, we have to put the bracket, so now it will read the video of this signal, then you have run the project, if there is no error, then this In this way we can read the signal, now let us see how we set the value in the signal, then leave the flower name for the time being, we uncomment the below method, then we also uncomment these methods, but for the time being Right now it will not snow because this is the implementation according to the normal property so at the moment we check how it is looking so now it is showing us like this whereas we should have shown it like this so no problem we will fix it Now let's take the value here, we had put the first name property in it, but now it is a signal, so we will have to put brackets in front of it, similarly here, in the last time also, we will have to put brackets, so now it is okay. The value here must have changed now, now if we have to change the value, what will we write instead of this dot first name dot set and set f name this f name like this in last name now we check so now I am here If you want to write John, you have seen that the value is changing now, that means now we are setting the value of the signal, so we set the value by this type; If we were changing the value of flower name here, it was not changing, while here we had kept the same property first name plus last name, now we do it here on computer, so what do we do with flower name equal to it? Tu computer ab here we click on computer then this will also be auto imported from Angular course now what we have to do inside the computer is making us an ara function and here what we will do is jo g dot first name plus destroy This is the last name, we will copy it and paste it here, now this is this dot first name, now as you know that this is a signal, then we will have to put brackets in front of the signal, that is, we will have to put parentheses, now what do we do here? flower is the name let's uncomment it and put parenthesis in front of it also now we check now we have to write here John and we click so you Saw that here also the name has changed and here in flower name also John Sharma has been written why because this flower name is computer signal now I pay here so it changed here as well as computer here too The signal always changes whenever its dependency changes, so I did it with string value, we can do it with number value also, so here I made an example to show it with number value, in which x6 is signal and a is a signal and s is a computer signal in which x and a are being + now i do the value of x here you now we change x value so you see here in pes 2 + 2 4 goes to A, I change the value of five and A, so here it is 2 + 57, so in this way we can convert that to a computer signal [MUSIC] So the updated value of the signal is its current. If it is on the basis of value, then I have prepared an example here, in which we have a quantity and we will increase and decrease the quantity, then we go to the court, this is its HTML, it is simple. There is nothing special in this so in the c file we have a signal for quantity and friends if we want to assign the type of this signal then we can assign its type in angle bracket from this type now let us see that we update it How to do so what do we do in on decree quantity this dot quantity i.e. this update now what we have to do to update we have to put brackets and after that we have to write an argument we write K T A quantity we write something We can also write we can write that also we can write this so why am I writing late then after that we will create a function and here we will write k-1 and in the same type we will copy it and below why plus one now we will check Let's say now if I increase then you quantity is increasing and if I decrease then quantity is also decreasing so the update which it does is based on its current value so whenever we update a signal If we do this, first of all we will get its current value here and after that we have to apply a function and update the current value by adding plus to it or by multiplying it, we can update a signal by this type. Now what does mutate do, it comes down to modifying the value of the signal to which we do it or to modify any object property, now first of all we see the example that how do we modify the element of the area. Here I have taken an error, now when we click on pay add employee here, we will have a form here, when we click on it, at the moment I am controlling this value, but what do we have to do? The value is to be pushed in this array, for which we will do the mutate method, so once I show you the html and s file, then as you can see, I have taken an employee's array here, but this error is a signal. I cut it from here so this is employee's signal with data and here we have created an employee form with name position and department which is done so now we see that whenever we do something here By fooling then how do we want to mute it so we have to write here disturb it which is our property now we will write here mp list we can write anything but this is the list of employees so we are writing a p list and its after we will create a function now what we have to do is a p list and push what to do this dot employee form dot value this dot employee form dot value isko we comment now we check then we add an employee now if I steal atm then You have seen that now an employee has been added here, in the same way, if we add something else, then it will be added here, so in this way, we have muted here, how can we modify the property of the object, with the help of mutate? I have made an example here, so I have made an example here, to change the property of the object, as soon as we click on the button, we want that the value of this laptop should be changed in the mobile. If we go to this, you will see that I have taken an object and what is the object signal, here I have taken the signal of a product, in this I have inserted the object and I have made a black method, so I would have shown you its HTML first. Yes, the HTML is also simple and I have shown the product here with the same category price rating and here But I have made a method, now we do it to mutate only one single property of this object, we can mutate any of the properties, when I wrote the product dot, the category name, price rating, whatever is there, it is showing here. If we have to change the name property then we have to write product.net it equal to single mobile now we check so now I will click here then this laptop property will change so you have seen here laptop instead of mobile has gone very fresh I click on this button again so here laptop has become mobile now with this type we can mute any property if I want to mute the category then I click here If I do, now the category has been mutated, so in this way we mutate the method, now friends, there is one thing here, the effect of which we do it, side effect for the sake of side effect means we are changing any value like If we are updating someone, mutating or setting a signal, then along with that if we want to reduce anything else, as if that data reaches the through server of any AP or local Whether it is in storage or whatever it is related to action like I changed it now I want it to be available on local pay as well as on AP pay in our database. if one is gone tomorrow what will we do for that we create a property side effect make it equal to effect then it is imported from angular course what will we do after that here we will create a black care of function and here we Console do at the moment console dot people I control any at the moment like I do n't have anything in the US trade control [music] Even if there is nothing to do with the signal, then it is not a part of the change in our signal, the effect will reduce only when we reduce the effect of a signal, and here in this effect we will have to mention which signal has a greater effect . ye change hai ab like main console logo me kya karta ho product name changed tu aapse aap yahan pay main kya karta hoon this dot product ab yahan pay this dot product mention hai which is a signal so ab yeh side effect hole hoga me this button If I click on then you see here came product name change you object now why object came here because we have passed complete signal here what we should have done desktop product dot name now we check so if you notice Yes, once this side effect happened in the beginning also yesterday because initially the value was set in the first time signal, then now we will click here, then what is this side effect, product name change to mobile, then this type of side effect does and you have seen it happened only yesterday when we did not mention the property of the signal in it, when we did not do it, then it did not happen even yesterday, so friends, in this video we have seen all the examples, we have seen how to set the value in the signal. and how to do computer signal after that we saw how to update the signal how to mute the signal and we also saw in big of side effects so friends how did you like this video please tell me by commenting friends if you If you like my video then like and share this video and you can also follow us friend on Facebook Twitter and Instagram if you like this video of mine then like this video and subscribe my channel Ustad so that you can get the update of my next technology video
