understanding ngOnChanges lifecyle hook

Question

Below is the explanination provided for OnChanges life cycle event in angular2 documentation.

ngOnChanges - before ngOnInit and when a data-bound input property value changes.

Below is my sample component code

@Component({
   selector:'app-main',
   template:`
      <user-form>Loading....</user-form>
   `,
   directives: [userFormComponent],
   providers: [HTTP_PROVIDERS,UserService]
})

export class AppComponent implements OnInit , OnChanges {

  @Input()
  public prop: string = "hi!";

  ngOnInit() {
     console.log('ngOnInt') ;
  }

  ngOnChanges() {
     console.log('ngOnChanges') ;
  }  

}

And I am refering to this component in my html page like this

<app-main [prop]="test">Loading...</app-main>

Now my question is, even though I am changing databound input property "prop" by assiging value "test", why is that ngOnChanges is not executed. By the way I am new to angular2.

Answer 1

The problem is that this doesn't apply to main components / root components.

The reason why this is not working is that your index.html in which you place the is not an angular component. Because of this, Angular won't compile this element. And Angular does not read attribute values during runtime, only during compile time, as otherwise, we would get a performance hit.

For this reason, the ngOnChanges hook method doesn't apply.

See this question:

• Angular2, TypeScript, How to read/bind attribute value to component class (undefined in ngOnInit)