Change Detection Strategy Angular Explained with Examples

hello everyone welcome to another video on this video i'm going to talk about the uh change detection strategy in angular so this is a change detection strategy in the angular website it's written a couple of this here and it also has a couple of the example on change detection strategy but i'm gonna going to explain a little bit more about how it's really going to work in angular so i have a project here which is created in localhost 4200 and this is my uh the angular app which is creating from the cli so what i'm going to do at this time is i'm going to clear all my html and i'm going to save as a test so i can see it here and i'm going to generate a component here so i'm going to generate a new component so ng generate me a component so the component cannot be a parent component and i'm generate a change component uh not change sorry to child component all right okay so i have a parent here and a child component and i have app.html uh so this is sorry it is app component so an app component i'm gonna call the parent and on parent component i'm gonna call the child i'm gonna save this and i'm gonna save this so it says that parent works and child work so what happen is when the change detection strategy will work when will the transition will work right so the first thing what is really happening in angular it whenever it changes uh like an event whenever it's triggered like a trigger like an event or a promises or observable then john john.js will trigger the or change the detection strategy so by default the angular usd are changed that uh detection strategy default which is a one here and it's using the default version so whenever you change something on ng model or maybe on a premises or observable then it will work uh because angular will tell their child component that it's been working because it's using a default one but if you want to uh use your own change detection strategy then you can use on push and what what happen if you use on push then the angular will not detect any like observables events or any promises that you have to tell that angular that i am using the kind of like observable then you need to change in a view uh so to explain this more i'm going to create i'm going to go in directly in code i guess so here i created a parent and a child as you know so now i'm going to tell show you guys how it really works so on the app.html what i'm really going to do here is i'm going to create your input field here and the type is going to be text and i'm going to bind with the ng model here and this is going to be uh the animal is going to be your food all right i'm going to save this now it's going to give me an error because uh the first thing is i need to create this and i'm gonna save it here and it's gonna going to give me another year because i haven't import the forms modules on my modules here all right so i'm gonna import the form modules and i'm going to import that from angular all right i'm gonna save it f capital okay uppercase here okay save now if i refresh this if i refresh then it shows parent and child works but if i go in html i haven't saved this i think so now i have an input box right here and this is this input box so input box has a parent here and parent also has a child so now what i'm going to do is to show how the change detection will work is i'm going to go in parent i'm going to create a function here called trigger parent all right i'm going to call these functions here in in my view so i will go in pattern component and i'm going to create the same exact function right here and i'm just going to print here the trigger parent all right so here trigger parent so when it's loaded the first time so see the trigger pattern will trigger a couple of times because of the view is loading here all right the view is loading so i'm going to do exact same thing for child i'm going to do this and i'm going to do a trigger child i'm going to save this it's going to give me a error i guess and i'm going to go here and i'm going to create a same exact function for a child it's going to be trigger child it's going to work and it's going to print bunch of pattern child and trigger type so this is a default way and also as you guys can see if i change my ng model which is a two-way binding then it also trigger this method here it also triggering the method on the view here right if i refresh this and if i do it then it's going to trigger every time but we are not using any of the parent and child data to reflect to change or do anything but even i haven't used this this parent or child will trigger this kind of event here so this is a default one the angular will use the change detection strategy our default version so whenever you change an energy model or promise stuff like that then it will trigger the any events which are triggering which are registered on a parallel child and to disable this we should use the change detection strategy on push which is we're gonna tell when you should re-render the view so here so if i say change detection strategy change detection and if i say change detection strategy which is not default on push on parent now if i put any of the event then it doesn't even trigger it does trigger the first time because it's initiating the class but if you change this any ng model it doesn't trigger the reason behind is we use this so which is good so now let's say inside the parent if i use some kind of async call so for now i will just use a set timeout so after two second i want to print something on view so i'll just say that this is apparent parent food i don't know parent food is going to be empty here i'm going to make this as an array and i'm going inside the set time set time out i'm going to print the test all right this should be this so now after two second this this uh class variable is changing with the test so now i want to print that here all right i want to print it here so this is my variable so if i save it it reload it after two second it doesn't print it does not print my array if i in disable this then after two second it's print here test because the default is whenever i change the ng model it's also going to print this function it's going to also call this method but it's going to work out all the async call which is inside in in this component parent component because in default angular detect these changes and it will show it in a view but if i use my own change detection strategy then angular disable that and it doesn't know any data any model or any class variable it's been changed so we have to let them know by manually so to do that we will use the change i'll create a cd and it's a change detector ref so if i use the change detector ref and if i tell that okay so when data is loaded now i have to change in my view then we could use the mark for check so now whenever data is changed it just print me a test here so now the angular knows it but it doesn't trigger any of the event if i change any model as well but it will only trigger when we when we tell the angular all right this is the one way but if i disable this then what happened is if i disable this too as you know it's gonna detect and also it's gonna whenever i change any model it's gonna trying to trigger event as well all right but if i use the change detector ref then i could use something called detach i use a detach then it it it's exactly the same thing as change detection strategy on push all right so if i click something here if i change the ng model it doesn't change anything here and it doesn't give me the uh set timeout to the the async call and it doesn't refresh my view ad as well so if i use this as constructor the test then it's gonna give me we will tell this component exact same thing as on push will tell them okay we're gonna use our default version and when the data is changed then we will tell that okay now you need to change in view so we will tell them that the tag changes so if i do a detect changes now you will see a test here but still if you type it here you will not it will not trigger any of the event okay so another important things right here is if i we use the change detection strategy on parent then the child will also it will block it because the parent has a child so it doesn't go in a tree structure it will use the default not default the hour version which is on push on parent and yeah it will also it will also not triggering any of the event on the child so that's why if i print this then even though i'm using a change detection strategy which is cd detached on parent if i go in child i wouldn't use anything but it doesn't trigger because pattern block that all right so this is a i have already spoke about the uh uh change change tag detect a change sorry detect changes uh detach here and the another one phones i'm gonna talk the last one is reattach so there is something called the re attach as well so re attach is a standard uh angle what angular use if i do reattach and if i comment this out then read that is basically it will re-attach the standard version standard one which the angular provided so when we should you should we should use a re-attach is whenever we get some kind of data in here like an input data let's assume i get some input field here from my app.component and the input query is a value and if the value has we can we can validate here in constructor if the value has something all right if the value has something then only use the cd dot detach otherwise use the reattach and and if now the value doesn't have anything that's why it's calling the standard one if i put the value input value or it's coming from it's coming from app or it's coming from directly from here now this will use a standard wanted detach our own one so if i change something then it will not work the test is work because i detach here the changes so hopefully this guy this video will help you guys to understood the change detection strategy on angular and if i'm going to create more videos on angular react or any of the programming tech which is available in the market so please do subscribe and like my videos and thank you very much for watching this video bye for now

Channel: Sam Lama

Views: 2,667

Keywords: Angular, ChangeDetectionStragey, Angular 10

Id: FgBLcQ4c8XU

Length: 14min 35sec (875 seconds)

Published: Sun Sep 06 2020