How to detect Angular life cycle hook OnChanges

2
votes

In this simple component with only one input box and two-way binding I wanted to test OnChanges life cycle hook by logging to console when I type into input. ngOnChanges is not logging to console. ngOnInit is. What is the best way to make it work?

import { Component, SimpleChange } from '@angular/core';

@Component({
  template: `
    <div>
      hello life
      <input type="text" placeholder="hassan" [(ngModel)]="name" />
      <p>my name is:{{ name }}</p>
    </div>
  `,
  selector: 'hook-life',
})
export class LifeCycleComponent {
  name: string = '';
  constructor() {
    console.log('constructor ');
  }

  ngOnChanges(c: SimpleChange) {
    console.log(`onchanges ${c.currentValue} `);
  }

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

  ngOnDestroy() {
    console.log('onDestroy');
  }
}
2
angular
Possible duplicate of In Angular 4 the hook ngOnChanges is not firing on input - mxr7350
Step 1: actually implement the OnInit, OnChange, OnDestroy interfaces. All you've done is defined the methods but you've not implemented the interfaces. - Roddy of the Frozen Peas
ngOnChanges are not for template bindings but for component @Input annotations. Use [(ngModel)] way instead. - VagrantAI
thanks VagrantAI this is just for test. - kogibail

2 Answers

3
votes

I notice you have not imported or implemented your lifecycle hooks. Try doing this:

        import {Component, SimpleChange, OnInit, OnDestroy, OnChanges} from '@angular/core'; 

        @Component( { template:`
          <div>
            hello life
            <input type="text" placeholder="hassan" />
          </div> `, 
          selector:'hook-life' } ) 

        export class LifeCycleComponent implements OnInit, OnDestroy, OnChanges { 

        constructor(){ console.log("constructor ")} 

        ngOnChanges(c:SimpleChange) { console.log(`onchanges ${c.currentValue} `); } 
        ngOnInit() { console.log("onInit") } 
        ngOnDestroy() { console.log("onDestroy")
        } }
1
votes

To watch for changes to an input element in the component, use a getter and setter like this:

private _name: string;
get name(): string {
    return this._name;
}
set name(value: string) {
    this._name = value;
    console.log(this.name);
}