The lifecycle hook method Purpose and timing ngOnChanges This is called whenever one or more data-bound input properties change. This method is called on initial changes (before ngOnInit) and any other subsequent changes. This method has one parameter--an object with keys of type string and values of type SimpleChange. The keys are the component's property names. The SimpleChange object contains current and previous values. A usage example is shown next. ngOnInit This is called once, after the first ngOnChanges. Note that the constructor of a component should only be used for dependency injection because data-bound input values are not yet set in the constructor. Everything else should be moved to the ngOnInit hook. A usage example is shown next. ngDoCheck This is called during every change detection run. It is a good place for custom logic, which allows us to do a fine-grained check of which property on our object changed. ngAfterContentInit This is called once, after Angular puts external content into the component's view. A placeholder for any external content is marked with the ngContent directive (the ng-content tag). A usage example of the ngContent directive is demonstrated afterwards. ngAfterContentChecked This is called after Angular checks the content put into the component's view. ngAfterViewInit This is called once, after Angular initializes the component's and child's views. ngAfterViewChecked This is called after Angular checks the component's views and child views. ngOnDestroy This is called just before Angular destroys the component's instance. This happens when you remove the component with built-in structural directives such as ngIf, ngFor, ngSwitch, or when you navigate to another view. This is a good place for cleanup operations such as unsubscribing observables, detaching event handlers, canceling interval timers, and so on.

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

@Component({
  selector: 'greeting-component',
  template: `<h1>Hello {{text}}</h1>`
})
export class GreetingComponent implements OnInit, OnChanges {
  @Input text: string;

  constructor() { }

  ngOnInit() {
    text = "Angular";
  }
 
  ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
    console.log(changes.text);
    // changes = {'text': {currentValue: 'World', previousValue: {}}}
    // changes = {'text': {currentValue: 'Angular', 
                  previousValue: 'World'}}
  }
}

<greeting-component [text]="World"></greeting-component>

export @Component({
  selector: 'greeting-component',
  template: `<div><ng-content></ng-content> {{text}}</div>`
})
class GreetingComponent {
  @Input text: string;
}

<greeting-component [text]="World"><b>Hello</b></greeting-component>