Angular2 Life Cycle Hooks

Each angular application completed a life cycle. It is important to make sure that you can not access inputs through its constructor.

Constructor:
The constructor executes first means before all other lifecycle hooks. If the component is depend on any dependency, then we should inject those dependencies in constructor.

import {Component} from 'angular2/core';
import {BusService} from './busService';
@Component({
  selector: ‘list-bus’,
  templateUrl: ‘list-bus.html’
})
class AppComponent {
  buses:Array;
  constructor(private _busService: BusService) {
   this.buses = _busService.getBuses();
  }
}

ngOnInit:
The ngOnInit of a component is called just after the constructor and after ngOnChange is activated for the first time. Here we can do our initialization work.

ngOnChanges:
The ngOnChanges will be triggered when the value of linked property changes. It runs, every time when the value of an input property changes. You will receive a change map, which contains the next and back values of the link, wrapped in a simple change.

{"brand":{"previousValue":"","currentValue":"BMW"}}

In the previous case, a change is reported in the entry ownership mark. The value of this property has changed from an blank string to the "BMW".

ngOnDestroy:
The ngDestroy command is invoked in the life cycle of a component just before the component instance is finally destroyed. Using this hook we can clean the component, for example, to cancel tasks in the background.

@Directive({
    selector: '[destroyDirective]'
})
export class OnDestroyDirective implements OnDestroy {
  sayHello: number;
  constructor() {
    this.sayHiya = window.setInterval(() => console.log('hello'),     1000);
  }
  ngOnDestroy() {
     window.clearInterval(this.sayHiya);
  }
}

Without using ngOnDestroy method here you will get thread logging “hello” until the end.

ngDoCheck:
ngDoCheck is activated each time the input of a component or policy are verified. We use this life cycle hook to extend control with our custom verification logic. It is also helpful if we want to increase the detection of changes by checking the minimum necessary and do not want to use the default algorithm.

ngAfterContentInit:
When the content of the component is initialized then after ngOnInit hook ngAfterContentInit hook is called,when all the data bindings are checked for the first time of our component.

ngAfterContentChecked:
It is invoked after every check of the content of the component or directive, effectively when all the linkages of the components have been verified; even if they have not changed

ngAfterViewInit:
Invoked after ngAfterContentInit when the component view has been initialized. Applies only to components.

ngAfterViewChecked:
Invoked after all check of the component view. Applies only to components. When all consolidations of the directives for children have been verified; even if they have not changed. It is also useful if the component expects some of its secondary components.