ngOnInit and constructor methods in Angular might be confusing to you,if you are new to Angular.In this tutorial, we will cover the differences between ngOnInit
& constructor
.
A constructor is a special method which will be called whenever we create new objects. And generally used of initializing the class members. It is a feature of the class(typescript) itself, an object-oriented design concept not Angular.
If you are coming from the object-oriented programming background, you will know what exactly is a constructor & what it will do.
Have a look at the below typescript class example to understand constructor
class AddNumbers{
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
add() {
return this.x+this.y;
}
}
The above class will be translated to JavaScript function
var AddNumbers= (function () {
function AddNumbers(x, y) {
this.x = x;
this.y = y;
}
AddNumbers.prototype.add = function () {
return this.x + point.x;
};
return AddNumbers;
})();
var numbers = new AddNumbers(2,4);
var additionOfNumbers = numbers.add();
console.log(additionOfNumbers); //Prints 6
If you see the above example constructor will be automatically invoked by JavaScript engine when we create a new object. Whereas add() method is being added to the prototype of the class.
We will call it whenever it is required. Our ngOnInit()
method is just a method being added to the prototype of the class. We will take an angular component example to understand it further.
ngOnInit
is a life cycle hook managed by AngularngOnInit
being added to prototype of the class createdngOnInit
called by Angular when component is initializedEvery component we create has a life cycle managed by Angular.
As part of the life cycle, angular creates it, renders it and checks when its bounded data properties changes, destroys the component before removing it from the DOM.
Angular exposes few lifecycle hooks that gives visibility into this events and to do post initialization operations when they occur.
One of the lifecycle hooks is ngOnInit()
ngOnInit() called by Angular to indicate that Angular is done with initializing the component.
To use ngOnInit() we have to import OnInit
from @angular/core
(Actually it is not required but as a good practice import the OnInit
)
Whenever you create a new component using angular-cli ngOnInit being added by default.
Go through the sample example
import { Component, OnInit } from '@angular/core';
@Component({
selector:'app-checkbox',
templateUrl:'./checkbox.component.html',
styleUrls: ['./checkbox.component.css']
})
export class CheckboxComponent implements OnInit {
constructor() {
console.log('Called Constructor');
}
ngOnInit() {
console.log('Called ngOnInit method');
}
}
This will be transformed the below Javascript function
var CheckboxComponent = /** @class */ (function () {
function CheckboxComponent() {
}
CheckboxComponent.prototype.ngOnInit=function () {
};
CheckboxComponent=__decorate([
Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
selector:'app-checkbox',
template:
__webpack_require__(/*! ./checkbox.component.html */"./src/app/checkbox/checkbox.component.html"),
styles:
[__webpack_require__(/*! ./checkbox.component.css */"./src/app/checkbox/checkbox.component.css")]
}),
__metadata("design:paramtypes", [])],
CheckboxComponent);
return CheckboxComponent;
}());
ngOnInit() method is added to the prototype of the checkbox component function.
That means someone has to invoke it, whereas constructor is automatically called by JavaScript engine. And this method is called Angular when the component is rendered.
That means somewhere in the angular core checkboxcomponent.ngOnInit()
will be called when it finishes rendering the component.
To understand it further will take an example
We will take an example of the Angular Material Checkbox component.
I have created a checkbox list component which displays two material checkboxes using a child component
import { Component, OnInit } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { checkboxInformation } from '../checkboxInformation';
@Component({
selector: 'app-checkboxlist',
templateUrl: './checkboxlist.component.html',
styleUrls: ['./checkboxlist.component.css']
})
export class CheckboxlistComponent implements OnInit {
checkboxes : checkboxInformation[]=
[new checkboxInformation(true,"Angular Material Checkbox Checked"),
new checkboxInformation(false,"Angular Material Checkbox UnChecked")];
constructor() { }
ngOnInit() {}
}
//checkboxlist.component.html
<div>
<app-checkbox *ngFor="let item of checkboxes" [checkboxInfo]="item"></app-checkbox>
</div>
And the child component is
import { checkboxInformation } from '../checkboxInformation';
import { Component,Input, OnInit } from '@angular/core';
@Component({
selector: 'app-checkbox',
templateUrl: './checkbox.component.html',
styleUrls: ['./checkbox.component.css']
})
export class CheckboxComponent implements OnInit {
@Input() checkboxInfo : checkboxInformation;
constructor() {
console.log('Called Constructor method');
console.log(this.checkboxInfo);
//Displays undefined
}
ngOnInit() {
console.log('Called ngOnInit method');
console.log(this.checkboxInfo);
}
}
// And checkbox.component.html file is
<p><mat-checkbox [(checked)]="checkboxInfo.status">
{{checkboxInfo.label}}</mat-checkbox></p>
And in addition to it, I have created a class checkboxInformation
export class checkboxInformation{
label:string;
status:boolean;
constructor(_enabled : boolean, _label :string ){
this.label = _label;
this.status = _enabled;
}
}
The output is
Here I am using @Input
Decorator to pass value from parent component CheckboxlistComponent
to child component CheckboxComponent
@Input
property is not initialized until the component view is set up. Which will not happen at the time of constructor invocation, that is why if I try to access the @Input
property checkboxInfo
in constructor console.log(this.checkboxInfo)
It will be displayed as undefined
ngOnInit()
is invoked when everything in the component is initialized. So that is why checkboxInfo
value is available inside the ngOnInit()
method.
In other words, The ngOnInit()
lifecycle hook Initialize the component after Angular first displays the data-bound properties and sets the component’s input properties It is a guarantee that our bindings are readily available.
It is called only once.
In object-oriented programming, world constructor is used to initialize the class members and used for dependency injection.
In Angular, the constructor is used for injecting dependencies into the component class. Nothing much. And keep the constructor as simple as possible. Unit testing can be very easy if the constructor logic is simple.
As explained above Angular calls ngOnInit when it finishes creating a component DOM. And we will use constructors to inject all required dependencies and processed input bindings.
So we have everything in place so put actual logic in ngOnInit() method.
It’s a common practice to use ngOnInit to do actual work even though the logic doesn’t depend on DI, DOM or input bindings.
The difference was so simple.
I hope you understand all the differences between constructor
and ngOnInit
method in Angular.
Thank you!
#angular #javascript #coding