Episode 8 | Angular Change Detection Strategy

hey guys this is circuit welcome back to my channel circuits tutorial today I will talk about change detection strategy of angular before that we need to know what is mutation an immutable value is one that once created can never be changed in other word keeping the original element unchanged at all times in JavaScript primitive values such as number string and boolean are always immutable however data structures like objects and arrays are mutable for example let's take this example where a steer is a good example now let's slice the string from position 1 to 3 and console.log is there let's check in browser okay it has displayed the whole string because no string methods change the string that they operate on they all return new strings the reason is that strings are immutable they cannot change we can only make new strings from it that means it has returned something new and then if I print STR - you will see two different strings here example and X X is the cut from position 1 2 3 now if I take an array for example where error is equal to 1 2 etcetera and then I do array push 3 and then if I console.log error you will see one two three yeah one two three array.prototype that push allows us to push elements to the end of an array this method does not return a new copy rather mutates the original array by adding a new element where array dot prototype that concat does return a new array since you know mutability and immutability now we can discuss about angular's change detection strategy angular has two different change detection strategies on push and default on push means that the change detectors mode will be set to check once and the default means that the change detectors mode will be said to check always if we don't mention any change detection strategy then default will be the change detection strategy for us in our example we'll have a test component and a child component the child component is used within our test component not HTML and we want to pass some value over there if you look in child component very closely you will see we have not used any change detection strategy for it that means it has the default change detection strategy so what happens when we use default strategy changes are triggered by events and the propagation Changez is done in two phases the application phase and the change detection phase in the first phase the application is responsible for updating the model in the second phase change detection starts at the root component to traverse all the components of the tree even if they do not seem to have been modified after detecting that some change of the property's bound to that template have changed so it will update the Dom to get the view in sync with the model to define change detection strategy you need to import change detection strategy in um and in your metadata you need to add this change detection property and change it action strategy dot default I am going to use default strategy for now however it is not required to mention the default change detection strategy because by default it will take the default option in our test component we have a dates variable which is actually an array of time stamps and that array is passed to app tiled component using dates attribute and that date attribute is received through input decorator within dates field in the view of child component we are displaying all time stem by looping through the dates array and displaying the timestamp in the browser as you can see that timestamp is displayed now what we want to do from the taste component when we want to push some dates in the dates array dates dot sorry this dot dates dot push now let's push a new that into it when we click on this click to animate button that time this animate mean function will be triggered and a new debt will be pushed into debts array now let's see I am clicking on this button yeah so dates are pushed into the array and from our child component we can display all timestamps now if we change the change detection strategy in our child component to on push see what happens now clicking on this button nothing is happening so what happens when we use on push strategy this means now we muted the object directly on push works by comparing references of inputs of the component until we provide a reference to a new object instead of a muted existing one the on pushed change detector will not get triggered in our test component we are mutating our dates field so instead of this code section if I write this dot deaths is equal to this dot deaths dot concat with a new debt then it means I have some existing debts and concatenating with a new debt and creating a new property so now these dot dates has a new reference that means now child component should detect that change now let's see it in the browser clicking on this button see changes are detected so every time when I click on the animate button a new reference is created in that dates array here angular has provided a very handy tool change detected if it has several functions by using those we can manually check for any change or we can detach any change detector from the component to use change detected if you need to import it from angular core change the tech tariffs and now let's create an instance of it CD changer Tector ref along with on push if we mute it an object then we need to trigger mark for check with ng do check or ng on change with checks if the reference of the input property has changed or not here let's mute it this dates property and now see what happens if i click on this animate button it is not taking the change now lets manually check for any change so in our ng do check this dot CD dot let's hit mark for check now clicking on this button see changes are not detected however we are mutating the property it still can check for any change if you want to know more about these lifecycle hooks you can click on the above link while using the default change detection strategy if you want to detach the change detector that you still can do using D touch function so here the changes are detected since we are using change detection strategy dot default now ok let me comment this out it still can detect changes now let me detach the detector so here if we write this dot C d dot d touch then it will not watch for any change C so the value is not there since we have already touched and on click it is also not listening for any change there is another way to run change detection once for the current component and all its children this is done using detect changes method this method runs change detection for the current component view regardless of its state which means that checks may remain disabled for the current view and component will not be checked during following regular change direction runs so now let me show you that I already have detached the event now let me implement detect changes so if I write this dot C D dot detect changes and see in browser you'll see the value is here now if I click on this animate button the value now the value is not updating since ng on changes ensures the change only for once and if I use this function in do check do check always checks or a change in the component and in its children now click on this button see changes are detected if we want to reattach the change detector to the change detector tree then we can use reattach function let me show you the example so here I already have detached the event and now let me reattach so this dot CD dot reattach will reattach the change detector again on on changes call so now let's see in the browser if I click on this button the changes are detected so that is how da touch works ok guys so that's all for today if this video is helpful for you then please don't forget to subscribe like and share thank you thanks for watching

Channel: Saikat's Tutorial

Views: 36,462

Rating: 4.6317992 out of 5

Keywords: Change detection, Angular 12, Chanage detector ref, Change detection angular 12, change detection in angular, angular change detection, angular, change detection strategy in angular, angular change detection strategy, learn angular change detection

Id: Ol6dFGs0Wxo

Length: 16min 54sec (1014 seconds)

Published: Sat Feb 17 2018