DEV Community

ngOnChanges best practice - always use SimpleChanges - always

Nick Raphael on November 05, 2019

ngOnChanges(): "A lifecycle hook that is called when any data-bound property of a directive changes. Define an ngOnChanges() method to handle the ...

Read full post

Juan Miramontes • Jun 9 '20

I have always used this approach to detect a specific change:

ngOnChanges(changes: SimpleChanges) {
  if (changes.myFirstInputParameter && changes.myFirstInputParameter.currentValue) {
    this.doSomething(this.myFirstInputParameter)
  }
}

IMO it is simpler and more readable than the for/switch approach

Dennis Frede • Jun 1 '22 • Edited

I currently go with the following. I think it's solid, and well readable:
defaultWidth and defaultHeight are some imported globally controlled variables.

  ngOnChanges(changes: SimpleChanges) {
    const {width, height, data} = changes;

    if (width) {
      const _width = width.currentValue ?? defaultWidth;
      // ...
    }

    if (height) {
      const _height = height.currentValue ?? defaultHeight;
      // ...
    }

    if (data) {
      const _data = data.currentValue ?? [];
      // ...
    }

  }

Miki (mike e) • Apr 27 '20 • Edited

need to add let change = changes[propName]; otherwise change.currentValue is undefined

ngOnChanges(changes: SimpleChanges) {
    for (const propName in changes) {
      if (changes.hasOwnProperty(propName)) {
        let change = changes[propName];
        switch (propName) {
          case 'pageSize': {
            console.log(`pageSize changed to:`, change.currentValue);
          }
        }
      }
    }
  }

Seba Vicente • Dec 19 '19

In this case, isn't it better to use a setter for each @Input instead of listen to ngOnChanges?

Nick Raphael • Dec 19 '19

I think that comes down to personal preference. Personally, I find Input getters and setters to be too verbose. I like all inputs handled in the same place.

Hank Chiu • Jan 18 '21

I find Input getters and setters to be too verbose

checkout subjectize, which wraps the setter under the hood and you don't need a private variable.

sproket • Apr 17 '20

WTF is 'change' in your example? I get cannot find name 'change'.

mayanksamval • Apr 23 '20

It's an oversight for sure! Use Changes[propName] instead

Thiam Kiat Sim • Mar 14 '21

this is a great way to illustrate how ngOnChanges works, thanks.
as pointed out by others, mistake in line:

this.doSomething(changes.myFirstInputParameter.currentValue)

Michael Berger • Jun 6 '20

I was practicing onChanges and ran into your post. Although I have only one input in my training app, I did fix it and added SimpleChanges to take care of the next developer, which happens to be me :)
I general life though from my observation there are few people who actually care about the next developer. Probably 2% from every 100 developers. It's sad, but everybody is obsessed to deliver smth. working, so people write some no so clean code. They get rewarded for such quick delivery, while nobody cares that the next developer will have a tough life...