Angular: Debug Expression Changed Checked Error
Tags: angular, webdev, javascript, typescript
Published: 2020-07-04 19:54:23

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2vpb5ngugvb9mrd9sv7l.JPG)

I hope, most of the Angular developers out there sometime has faced the error "ExpressionChangedAfterItHasBeenCheckedError". 
But, have you wondered why?

Let's try to demystify it out.

The most obvious reason when you are trying to update any input property from the parent (top) component to the child (inner) component, you receive this error once the view (inner component) is initialized.

First, let's see the error details on the console.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oq3t730bj9l9lqpbq22a.JPG)


Let's closely look at the error, it says when the component was loaded, the previous value was "null: Best wishes from Dad!!" but after the check the value got updated to "null: Got the Best wishes from Dad!!"

So, what's happening in the background.

Let's start with two simple component as shown in the diagram below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ibpjx6dytv2onzp65gir.JPG)

In the app component html file, we are trying to pass the input property message with the value "Best wishes from Dad!!".

Now, let's see what's going on in the child component ts file and html file.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n67cl2ihgguirw6yv9ds.JPG)

In the ts file, we are trying to update the input message property as "Got the Best wishes from Dad!!".

Let's go and debug the error in the console. If we see the error in the console..

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oq3t730bj9l9lqpbq22a.JPG)

If we try to get to the file which is view.ts, we will see the method as shown in the below diagram that contains the **view definition** after being initialized.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8ig8uwtjs5abp9nxsac1.JPG)

If, you see the value of **message** property in the app component which is **Best wishes from Dad!!**.
After the child component is initialized, we will see the the value of **message** property in the child component which is **Got the Best wished from Dad!!**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/99du8cydh8jnn8vx88le.JPG)

Also, if you notice the **oldValues** property is also not getting updated in both of the component view details.

So, this where the error is popped up when the check is done among the previous value and current value in the error ts file under the viewDebug method as shown in the below diagram.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tudbpogy66dr1x54wg3z.JPG)


So, now comes what are the ways to deal with this problem. There may be few but most important we will try to see the 3 ways.

**1. setTimeout function.**
**2. Triggering change detection manually.**
**3. asyncscheduler.**

Let's make the changes with each of the aforementioned ways and check it's output.

**1. code change with the setTimeout implementation in the child component.**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rduomwumys32xgdq5ne0.JPG)

**2. code change with the manual change detection implementation in the child component.**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qegdzdijun2g5l0a8doa.JPG)

**3. code change with the asyncscheduler implementation in the child component.**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ynts9aqyi95uy82d7f7f.JPG)

**Note: asyncscheduler uses the setTimeout under the hood.**

So, if we debug with any of the above 3 options, you will get this view details as shown in the below diagram.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/52cpbw9mjos2kc56ou1w.JPG)

Feel free to play around with the code and dig more about such #angular errors.

I hope it makes sense about the #angular change detection.
Happy coding. Keep learning. Keep exploring. 😊