SimpleChange in Angular

In Angular, handling changes in input properties is crucial for creating dynamic and responsive components. The SimpleChange class facilitates this process by providing a way to detect and respond to changes in input properties. This blog post will explore SimpleChange, its usage, and provide a sample code example to illustrate its application.

 

What is SimpleChange?

The SimpleChange class in Angular is part of the @angular/core package and is used in conjunction with the ngOnChanges lifecycle hook. When an input property changes, Angular creates a SimpleChange instance, encapsulating the previous and current values of the property. This information allows developers to respond to changes and implement logic based on the new and old values.

 

How to Use SimpleChange

To use SimpleChange, define the ngOnChanges method in your component and implement logic to handle the changes. The ngOnChanges method takes a SimpleChanges object, which contains a map of input property names to SimpleChange instances.

 

Let’s consider a simple example where a component updates its display based on changes to an input property.

Step 1: Define the Component

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-simple-change',
  template: `<p>Current Value: {{ value }}</p><p>Previous Value: {{ previousValue }}</p>`
})
export class SimpleChangeComponent implements OnChanges {
  @Input() value: string;
  previousValue: string;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.value) {
      const change: SimpleChange = changes.value;
      this.previousValue = change.previousValue;
      console.log('Previous:', change.previousValue);
      console.log('Current:', change.currentValue);
    }
  }
}

 

Step 2: Use the Component

<app-simple-change [value]="inputValue"></app-simple-change>
<input [(ngModel)]="inputValue" placeholder="Enter a value">

In this example, the SimpleChangeComponent has an @Input property called value. When this property changes, the ngOnChanges method is triggered. The SimpleChanges object passed to ngOnChanges contains the value property, which is an instance of SimpleChange.This instance provides the previous and current values. These values effectively update the component’s display.

 

Conclusion:

SimpleChange in Angular simplifies the process of detecting and responding to input property changes. By leveraging the ngOnChanges lifecycle hook and SimpleChange instances, developers can create more dynamic and responsive components. The provided example demonstrates a basic use case, illustrating how to implement and utilize SimpleChange effectively.