ngOnChanges not fired in native or in mobile web. Ionic 4

Issue

I have a component with this template:

 <app-graph-grouped-vertical
      [results]="graphRecords"
      [series]="graphPredictions"
      [seriesColors]="predictionColors"
      [xAxis]="xAxis"
></app-graph-grouped-vertical>

And inside GraphGroupedVerticalComponent, I got this:

export class GraphGroupedVerticalComponent extends GraphBaseComponent<GroupedResultDto>
  implements OnChanges, OnInit, OnDestroy, DoCheck {
...
 @Input() results!: GroupedResultDto[]

 ngOnChanges(changes: SimpleChanges){console.log('Triggered')}
...

}

So, when I get into the browser from the computer and the property graphRecords in the parent component changes everything works well, and the ngOnChanges in the child gets triggered. The thing is, when I use the app from a mobile browser or from the compiled native app, it won't trigger. For it to trigger, after records has changed I have to press something in the screen, anything (not a blank space, but an interactive element. It doesn't have to be related to the component or that property).

It happens in physical phones and in the emulator, Android and iOS.

I have even tried using ngDoCheck, but it doesn't trigger either. I'm kind of desperate, does anyone know what could be happening?

I'm using Ionic 4 and Angular 8

Solution

Well, it took me a while to figure out what was happening. It turns out that the operation of assigning the new value to records was happening outside ngZone. To anyone unfamiliar with this, zones are like a closed environment in which processes are run, and ngZone is where Angular runs asynchronous operations, and will change the UI accordingly.

This also goes the other way. If something is executed outside ngZone, Angular's ChangeDetection won't listen to it, and our UI won't change. Fortunately, you can force something to run inside ngZone by using ngZone.run(). And you can also run heavy operations outside of it so Angular does not refresh the UI unnecessarily, thus optimizing your app.

However, I still don't know why this specific operation was involuntarily executing outside ngZone...

Answered By - Javi Marzán