Difference between Constructor and ngOnInit
The angular bootstrap process has below defined steps.
- Constructing components tree - Constructor is called when Angular constructs tree of the components in our project. A component tree view is generated in this step with constructor been called for each class instance. A DOM element is set up for components.
- Running change detection - All the lifecycle hooks are called in this step. Before this step only, the constructors are already called for all the components. The component tree is already in place. Template nodes are set up in the DOM. Changes related to @Input and @Output bindings and change detection cycle starts here. Bindings will get updated and data will be shown during this step.
Constructor
The constructor is a typescript method that is associated with a typescript class by default. It is called when we create a new instance of the class. The constructor is used for defining variables, setting values for them, etc.
- It has no relation to Angular and its bindings.
- The constructor is a typescript concept which we used for dependency injection(DI). DI will look at the parameters of the constructor when it creates a new instance of the class. We generally inject services in the constructor.
import { Component } from '@angular/core';
import { UtilityService } from './services/utility-service/utility.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
constructor(private _utilService: UtilityService){} // DI in constructor
}
NgOnInit
NgOnInit is a lifecycle hook for a component lifecycle. We need to import this hook from @angular/core to implement in our component class.
import { Component, OnInit } from '@angular/core';
- It is called after the constructor.
- We will write all the logic hereafter the component is initialized properly.
- It is called after the ngOnChanges() lifecycle hook. As soon as there is any change in input and output bindings,ngOnChanges() is called.
- After the component is initialized fully, ngOnInIt() will be called.
- ElementRef and nativeElement can be used inside this as this.elementRef.nativeElement
- It is part of the change detection cycle of Angular.
Example
export class App implements OnInit{
fcCustomers: FormControl;
constructor(private elementRef: ElementRef,
private _userSrv: UserService, ) {
// this.elementRef.nativeElement is undefined here
}
ngOnInit() {
// this.elementRef.nativeElement can be used from here on
this.loadUserProfile(); //Logic is written here
this.fcCustomers.setValue(''); // Binding related initialisation is written here
}
loadUserProfile(){
this.profile = this._userSrv.getUserProfile().then((res: any) => res.data); // Fetching data from User Service
}
}
Comments
Post a Comment