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.

 

 

 

 

About Author

Author Image
Avilash Choudhary

Avilash has excellent experience in developing mobile and web applications using jQuery , Javascript and PhoneGap. His hobbies are watching and playing cricket.

Request for Proposal

Name is required

Comment is required

Sending message..