What is Angular “SimpleChanges” in ngOnChange function
This article is going to describe what is SimpleChanges, what it can be used and how to use it.
What is SimpleChanges in Angular?
SimpleChanges is an Angular/Core feature that can be used to see the changes and a few more details of the declared property names in a component. And also it needs to be used in the Angular ngOnChange method to see the values changes and to do relevant things.
Simply in the ngOnChange is fire when declared property values are changed. So in that method, we can set this as a param to store the data. like this
In this way we can check these details using SimpleChanges :
PreviesValue :
will give you the value that the property has previously.
currentValue:
will give you the current value of the property.
firstChange():
this is a method and it will return true if the previous value and the current values are the same or else false.
As you can see this way can help us in lots of ways in angular development.
For what we can use this?
Let's assume we have these properties declared in the Angular Component.
And whenever a value changes happen to one of these properties you need to run a method or do something in the application. and you need to do it if the changed value is not the same value previously the property had.
So, in this case, we will need an extra variable to hold the current value and check with the new value or some kind of trick to perform this task if we go with basics.
Here you go, this is the place this SimpleChanges going to help you.
With SimpleChanges you can do those things that I have mention previously in the ngOnChange function in simple ways without any trouble.
So let's see how we can do the task that I have explained previously.
How to use “SimpleChanges”?
First, add the ngOnChange function to your Component and use the SimpleChanges as a param as below
and let's assume I need to check the previous value and the current value of the “selecteModuleKey” property and if it's changed then I need to execute a method. So let's get it done as below.
Let me explain what I have done in the above code.
I have to use the ngOnChange function to fire the method if there are any value changes to the properties.
So I need to get the SimpleChange value of the “selectedModuleKey” and I have done it as below
And then I have called the “firstChange()” method in the if condition that is in the SimpleChange class to check, the previous value is, same as the current value of this property (selectedModuleKey) and the method will return true if the values are same so we need to fire the method if the values are different so I have reversed the boolean result to run it if the method returns false.
so this is how we can use this “SimpleChanges” method in ngOnChange to do this kind of task.
And always remember that you can access any of your property like I have access to the “selecteModuleKey” like
let change = changes[‘the property name];
So this the simple way that I can share how to use the “simpleChanges” in angular to do these kind tasks easily. and hope this article helps you with any kind of development with angular ❤ .
Thank you. ❤ 😃
