Difference between Constructor and ngOnInit in Angular

Overview of two Angular methods with code examples and explanations
30 August 2017   4452

The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialization of fields in the class and its subclasses. Angular or better DI analyzes 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 like

new MyClass(someArg);

ngOnInit is a life cycle hook called by Angular2 to indicate that Angular is done creating the component.

We have to import OnInit in order to use like this (actually implementing OnInit is not mandatory but considered good practice):

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

then to use the method of OnInit we have to implement in the class like this.

export class App implements OnInit{
  constructor(){
     //called first time before the ngOnInit()
  }

  ngOnInit(){
     //called after the constructor and called  after the first ngOnChanges() 
  }
}

Implement this interface to execute custom initialization logic after your directive's data-bound properties have been initialized. 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.

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.

WebStorm IDE to Get New Update

Version 2018.3 of one of the JetBrain's IDE has many new features and updates
22 November 2018   626

JetBrains has introduced an update to the WebStorm integrated development environment. In version 2018.3, support for TypeScript 3.1, JSON format, as well as the ability to pull Requests for GitHub are implemented.

The main innovations WebStorm 2018.3:

  • Automatic import of characters from project dependencies in JavaScript, parameters have hints. Improved null and undefined checks.
  • New function "Suggest variable names."
  • TypeScript 3.1 support.
  • An accessibility check for HTML added. Also, developers have improved the removal of actions for HTML and JSX tags — the user no longer needs to start reformatting the code or do it manually.
  • Data from CSS files can be transferred to other files.
  • WebStorm now warns about undefined components of React.
  • Added support for Vuetify in the framework Vue.js.
  • In Node.js, an experimental function of workflows has appeared - they can be used for tasks that heavily load CPUs.

The changes also affected the development environment itself. For example, support for interceptions and pull requests for GitHub. Users have access to a new contrast theme.

In March 2018, version 2018.1 was released. In it, the developers added support for the Prettier code formatting service, as well as compact pop-up notifications with documentation for all supported languages