ChangeDetection in Angular

Question

I'm trying to understand better how ChangeDetection is working and I have a question related to this.

If I'm using changeDetection: ChangeDetectionStrategy.OnPush, on ngOnChanges lifecycle hook I need to verify also if currentValue exists? Or it's enough to verify if the input was changed ?

I can give you an example to understand better what I'm talking about:

So, as I mentioned, I'm using changeDetection: ChangeDetectionStrategy.OnPush and this is my input @Input() isInspectionReopened: boolean; and ngOnChanges looks like this:

ngOnChanges(changes: SimpleChanges) {
  if(changes.isInspectionReopened) {
     // do something
  }
}

It's enough to verify changes.isInspectionReopened or I need to add changes.isInspectionReopened.currentValue ?

Valeriy Katkov · Answer 1 · 2019-07-24T09:30:06.117

SimpleChanges contains only changed values, so, if the isInspectionReopened prop isn't changed, it's missing there.

When you use ChangeDetectionStrategy.OnPush, usually you shouldn't use the ngOnChanges callback at all. ChangeDetectionStrategy.OnPush affects only logic, which makes a decision when to run change detection. So, when isInspectionReopened prop is changed, change detection will be triggered, because it's an '@Input' property, and your component html will be updated, if it's bound to the property.

But, if isInspectionReopened isn't an '@Input' property, for example the component loads the value from a server and updates it, OnPush detection won't recognize that change, unlike standard change detection. You can use RxJs Observables with async pipe to force change detection in case of OnPush strategy, here is an example.

Also, keep in mind that '@Input' properties trigger change detection only when they are updated via data binding of your parent component. If an '@Input' property value is changed by the component itself, the change detection won't be triggered.

Change detection is also triggered by the component dom events. For example, if you listen an click event, and change something inside the click handler, change detection will be triggered anyway because of the event.

Nice explanation! One thing just to be complete on that: For `ChangeDetectionStrategy.OnPush` Angular ChangeDetection runs only when an `Input` parameter is changed, AND it is a literal (like boolean or string). It does not run when something inside an object has changed. Then, you can see the change in `ngOnChanges`, but have to run changeDetection manually. — dave0688, Jul 24 '19 at 09:08
@dave0688 Yes, you are right. Even more, it runs only when the `@Input` property is changed by data binding, which can change only the prop reference, but not internal state. I updated the answer a little. If an object internal prop can be mutated, I make that prop observable, and it solves the problem. I wrote a big angular project last year without manual change detection at all, I just only used ChangeDetectorRef to manually trigger change detection few times. — Valeriy Katkov, Jul 24 '19 at 09:39

ChangeDetection in Angular

1 Answers1