Fixing Expression Has Changed After It Was Checked Error in Angular

in this video I want to show you how to fix a really popular angular error expression has changed after it was checked while development at some point you might get such eror so expression changed after it has been checked error and here we're seen that expression has changed after it was checked the previous value is a string loading the current value is a string all done loading and it is happening in app compon so let's have a look on the code as you can see here my app component and I just have a single line in the template it's a div with the message property and as you can see here we're assigning a message property by default it is loow in so this is this part here and inside NG after view in it we're re assigning this property and we're setting inside all downloading this is all our code nothing else and we're getting such Arrow which is for most people who never saw this really confusing and the first thing that I want to mention here this eror will be there for you only in development mode which essentially means if I will build this project you will never see this errow in the console it won't be there at all and we must understand why this error is there at all to understand how to fix it correctly and in development mode when angula is doing its change detection cycle it does it twice one after another so we're getting two cycles and a lot of people are questioning why angular does it at all this is completely useless this is not useless this is exactly why we are doing that angular checks that our values are stay the same and they are not changed because if they are changed then you have some nesty mutation or side effect which should not be there as you can see inside our code what we are doing we are changing this message but we are doing it in n g after view init hook and this Hook is a part of initial change detection I'm sorry for Interruption but I just want to let you know that I have a membership here on the channel that you can join to support me it will give you access to the new videos earlier emojis and priority replies to your comments now let's jump back into the video and the main problem is here that we are changing the value of the property message but we are not triggering a change detection cycle which essentially means this change is not there in the markup it Compares The Binding of the properties in the markup and it sees that this property was changed this is exactly what this serah says so the most important here to remember is if you have anything which changes a binding of the variable inside template you must run after this and new change detection cycle now let's take a look on all ways how we can fix this era and first of all we can set our a message not inside NG after view init but in NG after content checked as you can see this fixed our error and here is official angular documentation we see NG after viw in it this is what we used previously and this is a hook after angular initializes the component View and child views which essentially means after Dom rendering but here you can see a line that it is being called after the first NG after content checked which actually means this after content checked function will be done before after view in it which essentially means we're changing the value of our message before the content was rendered so this is kind of similar to writing this message for example inside NG needit or inside Constructor so this is one way to fix it but actually now I want to revert our code and use here another change strategy and in order to make your application more performant I highlight recommend you to always use change detection strategy which will be on push and I already covered change detection strategy in this video so if you missed it don't forget to check it out now let's have a look if we're getting an error I'm reloading the page and here we just see loading inside our dome which essentially means this code is not reflected inside our markup and actually we are not getting this era at all which is really good so essentially is on push you will get much less errors because you need to trigger change detection cycle a lot by yourself for example in this case so if we assigned a variable we want to reflect these changes in the Dom for this we must trigger a change detection cycle again and in order to do that we can inject in our component change detection reference and now after our message we can call this CDR do detect changes and as you can see it will check this View and its children for the changes and in browser we can see that all done loading is successfully rendered this is actually the best variant for this specific use case but we can also do it differently instead of this CDR detect changes we can just wrap our code with set time on zero which will execute it later as you can see I'm Rel loading the page and we're still getting load in because here the change detection strategy is on push and we must manually do the check but if I remove here change detection strategy you can see that it is working now we're getting all done loading after the content was rendered and our message was set inside set timeout I would say this is not the cleanest solution but it will also work now I want to show you exactly the same error but with other code as you can see still the same error but we're getting that the value previously was true and the current is false and it happened happens in our app component so let's have a look on our code first of all here I have a behavior subject Lo in and by default it is true and we also have here a response stream with off response so inside the stream we just have a stram response and here with step we're changing this loading next back to false and as you can see inside the template I'm rendering I am then loing variable and response variable and as you can see we're getting I'm false response so what is false this is our loading as you can see this is this line which changed it to false and our response here is just a response string which essentially means we rendered everything correctly but we're getting a this s what is the problem and actually the problem here is similar to our set timeout fix because essentially in this case here of response is synchronous and not asynchronous which actually means it will will happen immediately with this tab after off and then the second detect changes cycle will see that the value is not the same before it was true and now it is false and this is wrong so when angular subscribes to this observable with a sync keyword then this change happens instantly so our subscription chain is fully synchronous so how can we solve this issue the workaround for this would be to add here a delay zero which is is essentially the same like a set time out zero as you can see in browser now we're not getting an error because this code will delay our Tab and then this tab will be executed later and this code is not synchronous anymore so now you know how to fix this errow but if you're interested how to implement a validation inside reactive forms in angular make sure to check this video also

Channel: Monsterlessons Academy

Views: 2,798

Keywords:

Id: DsdA4ev-_tQ

Length: 8min 2sec (482 seconds)

Published: Thu May 16 2024