Why is ngOnchanges not firing when a boolean value changed in angularjs 2

Question

I have seen similar questions on this issue but non of the answers worked for me. I have a boolean value that change whenever an async task has been completed, but it's strange that ngonchages does not fire anytime it changes. Below is my code:

import {
    Component,
    OnChanges,
    SimpleChange
} from '@angular/core';
export class HomePage implements OnChanges {

    isLoaded: boolean;

    constructor() {
        this.isLoaded = false;
        this.loadData();
    }

    loadData() {
        setTimeout(() => {
            this.isLoaded = true;
            console.log(this.isLoaded);
        }, 3000);
    }

    ngOnChanges(changes) {
        console.log("There has been a change ", changes); //this is not firing
    }
}

Answer 1

ngOnChanges is a lifecycle callback of Angulars change detection mechanism and it is called when an @Input() is changed by Angulars data binding

When you have

@Input() isLoaded: boolean;

and

<home-page [isLoaded]="someValue">

and someValue in the parent component is changed, then change detection updates isLoaded and calls ngOnChanges().

For your case the simplest solution is probably using a getter instead of a property:

_isLoaded: boolean;
set isLoaded(value:bool) {
  this._isLoaded = value;
  this.doSomething(value)
}
get isLoaded() {
  return this._isLoaded;
}