In Angular 4 the hook ngOnChanges is not firing on input

Question

I am pretty new to Angular2/4. I have created a basic component with an input field. The user input will be reflected in the other components that are bound to the user input. Now I want to setup a general listener to a value change.

I thought the OnChanges hook would be the perfect solution but ngOnChanges method was NEVER called. Am I doing something wrong?

Any hint appreciated...

import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';  @Component({   selector: 'my-app',   template: `     <input [(ngModel)]="name">     <input [(ngModel)]="name">     <h1>{{name}}</h1>   `, }) export class AppComponent implements OnChanges {    @Input() name: String = "abc"    ngOnChanges(changes: SimpleChanges) {     // changes.prop contains the old and the new value...     console.log('on change', changes)   }      } 

Answer 1

ngOnChanges is not called every time a component property changes internally. It gets called when the databinding from the parent component pushes a new value into the child component. So if your parent component has

<child-comp [name]="parentValue"></child-comp> 

When parentValue changes, the child component's @Input() name will change and that will trigger ngOnChanges

Take a look at the docs:

ngOnChanges

Respond when Angular (re)sets data-bound input properties...Called before ngOnInit() and whenever one or more data-bound input properties change.

To be notified when your form inputs change, in the long run the best approach is to learn Reactive Forms because they make you create the FormControl objects in your component and expose a very simple observable that emits every time the form value changes.

If you wish to stick with template-driven forms, you can bind to the input's keypress or keyup event to fire whatever logic you want to run on change.