Angular Component Lifecycle Methods
Posted By : Avilash Choudhary | 31-Jan-2018
Hello Guys, Today we are going to understand the methods available in Angular Lifecycle hooks.
Each component have their own constructor but you can not access the inputs of a component through its constructor. Lifecycle hooks will be helpful in accessing inputs from its component.
Construtor:
Component class constructor is the first one to be called before any other component lifecycle method. Its the place where all dependencies will be injected.
import { Component, OnInit, ViewContainerRef, Inject, ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
@Component({
selector: 'ka-app',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
isCountryAdmin: boolean = false;
countryId: number;
accessToken: any;
constructor(
public resourcesService: ResourcesService,
public sessionService: SessionService,
public globalEventService: GlobalEventsService
) {
}
ngOnInit: This is the place where you initialisation all your work. This method is called after the constructor and after the ngOnChange is called for the first time.
ngOnInit(): void {
this.paramsSubscription = this.route.parent.params.subscribe(params => {
this.organizationId = params["id"];
});
}
ngOnChanges:
This method will be called when the value of the bound property change. whenever the value of input property change, it executes. It receives the changes map with pervious and current value of the property.
ngOnChanges(changes: { [key: string]: SimpleChange }): any {
if (changes["selectedUnitInfo"] && this.selectedUnitInfo && this.selectedUnitInfo.name == "Hjemmeplejen") {
console.log("entered ");
this.getNotifications("tab_103");
}
}
ngOnDestroy:
This method is used to clear up all the things when that component finished their work. This method is called when the component instance is destroyed. This is the perfect place to perform cleaning up tasks of that component.
ngOnDestroy() {
if (this.activityParamSubscription) {
this.activityParamSubscription.unsubscribe();
}
}
ngDoCheck:
This method is triggered whenever input property of a component or directive is checked. This is the place where we can write own code for change detection and not using the default algorithm.
ngAfterContentInit:
This method will be triggered after ngOnInit when directive or component content has been initialised. After all the binding have been checked for first time.
ngAfterContentChecked:
After all the binding have been checked, even if they haven’t changed.
ngAfterViewInit:
This is the place where view has been rendered and you can bind all your events here.
ngAfterViewChecked:
This method is called when component view is checked even if they haven’t changed.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Avilash Choudhary
Avilash has excellent experience in developing mobile and web applications using jQuery , Javascript and PhoneGap. His hobbies are watching and playing cricket.