Skip to main content

The purpose & usage of “SimpleChanges” in the ngOnChange function

This article will describe what the SimpleChanges object is, its purpose and how to use it.

 

What is SimpleChanges in Angular?

SimpleChanges is an Angular/Core feature that can be used to view the changes and a few more details of the declared property names in a component. It also needs to be used in the Angular ngOnChange method to view the values changed and to carry out other relevant functions.

The ngOnChange is fired when the values are changed in a declared property. In that method, parameter can be set to store the data, as below;  

 

Image 1

 

In this way these details can be checked using SimpleChanges:

Properties of SimpleChanges
                             Properties of SimpleChanges

 

PreviesValue:

Gives the previous value of the property.

currentValue:

Gives 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; else it will return false.

 

What can we use this for?

Let's assume we have these properties declared in the Angular Component.

 

Image 3

 

What if, a method has to be called or some other task needs to be executed, when the value of one of these properties is changed? If this is done manually, an extra variable is needed to hold the current value to compare with the new value to perform this task.

This is where “SimpleChanges” is going to help you.

With SimpleChanges you can perform the tasks mentioned above in the ngOnChange function in a simple manner.

Let's see how it can be done.

 

How to use “SimpleChanges”?

First, add the ngOnChange function to your component and use the SimpleChanges as a parameter as below.

 

Image 4

 

Let's assume the previous value and the current value of the “selectedModuleKey” property needs to be checked and if it has changed, a method has to be executed.

This is how to get it done.

 

Image 5

 

Let me explain what I have done in the above code.

The ngOnChange function is used to call the method, if there are any value changes to the properties. Therefore, SimpleChange value of the “selectedModuleKey” has to be obtained and it is done as below.

 

Image 6

 

And then, the “firstChange()” method is called in the “if” condition that is in the SimpleChange class, to check if the previous value is the same as the current value of this property (selectedModuleKey). This method will return true if the values are same. Since we need to fire the method only if the values are different, I have reversed the boolean result to run it if the method returns false.

Always remember that any of your property can be accessed similar to the way “selectedModuleKey” was accessed, as below.

let change = changes[‘the property name];

This is how “SimpleChanges” object in ngOnChange can be used to execute a task of this kind. Hope this helps in your day-to-day Angular development.


LEAVE A COMMENT







POST COMMENTS


© 2020 Creative Software. All Rights Reserved | Privacy | Terms of Use