NgOnInit

A class constructor in Angular is mostly used to inject dependencies. Angular calls this constructor injection pattern.

The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialisation of fields in the class and its subclasses. It has nothing to do with Angular2. Angular, or better Dependency Injector (DI), analyses the constructor parameters and when it creates a new instance by calling new MyClass() it tries to find providers that match the types of the constructor parameters, resolves them and passes them to the constructor

NgOnInit

• ngOnChanges is called when an @Input or output binding value changes
• ngOnInit is called after the first ngOnChanges

Now when does ngOnChanges is called

angular.io/guide/lifecycle-hooks

Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values. Called before ngOnInit() and whenever one or more data-bound input properties change.

When Angular calls ngOnInit it has finished creating a component DOM, injected all required dependencies through constructor and processed input bindings. And all of the class members has been defined. So here you have all the required information available which makes it a good place to perform initialization logic.

It’s a common practice to use ngOnInit to perform initialization logic even if this logic doesn’t depend on DI, DOM or input bindings.

Mostly we use ngOnInit for all the initialization/declaration and avoid stuff to work in the constructor. The constructor should only be used to initialize class members but shouldn’t do actual “work”.

So you should use constructor() to setup Dependency Injection and not much else. ngOnInit() is better place to “start” – it’s where/when components’ bindings are resolved.

angular.io/api/core/OnInit

ngOnInit()

A callback method that is invoked immediately after the default change detector has checked the directive’s data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.s

Let’s put it all together and see them both in action:

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

export class AppComponent implements OnInit {

                  constructor(myService: MyService) {
                  //Let’s assume this will return an array of samples [‘sample 1’, ‘sample 2’, ‘sample 3’]
                  this.samples = myService.getSamples();
                  this.sentence = ‘Number of samples: ’;
  }

ngOnInit() {
  this.countSamples();
}

countSamples() {
  //Result will be ‘Number of samples: 3’
         this.sentence = this.sentence + this.samples.length;
  }
}

In this example we are injecting the dependency myService. You should not confuse this with MyService (note the uppercase ‘M’) which is the type of the service. Then we are calling the method myService.getSamples() which will resolve with an array. In our ngOnInit() method we call the function this.countSamples() which is able to work with the (already initialized and resolved) fields this.samples and this.sentence. We can see that countSamples() simply appends the length of this.samples to the string this.sentence.

ngOnInit() is called after ngOnChanges() was called the first time. ngOnChanges() is called every time inputs are updated by change detection.

ngOnInit() is called right after the directive’s data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated.

ngAfterViewInit() is called once after ngAfterContentChecked(). ngAfterViewInit() is called after all child components are initialized and checked.

ngAfterViewInit() is called after the view is initially rendered. This is why @ViewChild() depends on it. You can’t access view members before they are rendered.

When I say rendered – It means, it’s added to the DOM. If you set display: hidden it’s till rendered, but not visible on the screen. But if you investigate the DOM using the browsers devtools, you’ll be able to see the markup.

ngAfterViewInit() is called after a component’s view, and its children’s views, are created. Its a lifecycle hook that is called after a component’s view has been fully initialized.

ngAfterViewInit() is called when the bindings of the children directives (or components) have been checked for the first time. Hence its perfect for accessing and manipulating DOM with Angular 2 components.

ngAfterContentInit vs ngAfterViewInit

Content is what is passed as children usually to be projected at some element of a component. View is the template of the current component.

The view is initialized after the content and ngAfterViewInit() is therefore called after ngAfterContentInit()

When should you use ngAfterViewInit?

ngAfterViewInit is useful when you want to call a lifecycle hook after all child components have been initialized and checked. The word “check” here used in the sense of change-detection

Lets see and example

import { Component, OnInit, DoCheck, AfterViewInit } from "@angular/core";

@Component({
  selector: "app-home",
  template: `<a (click)="clickMe()">Click me</a>`,
  styleUrls: ["./home.component.css"]
})
export class HomeComponent implements OnInit {
  constructor() {}
  ngOnInit() {
    console.log("onInit called");
  }
  ngDoCheck() {
    console.log("do check");
  }
  ngAfterViewInit() {
    console.log("after view init");
  }
  clickMe() {
    console.log("link clicked");
  }
}

In the example above, ngAfterViewInit() gets called one time after ngDoCheck.

Triggering the clickMe() function WILL NOT trigger ngAfterViewInit().

Remember from official doc –

ngDoCheck() – Detect and act upon changes that Angular can’t or won’t detect on its own.

Called during every change detection run, immediately after ngOnChanges() and ngOnInit().

Further Reading

https://angular.io/guide/lifecycle-hooks#component-lifecycle-hooks-overview