Grasp 8 Angular 4 Lifecycle Hooks In Less Than 8 Minutes

0

Techies, today we will dig into the Angular 4 Lifecycle Hooks.

Angular manages a lifecycle for its components like creating, rendering, modify data binding properties and destroys it before removing it from the DOM.

It also offers hooks that allow us to perform any tasks/operations when these events triggered.

Overview On Angular 4 Lifecycle Hooks

Angular 4 has 8 lifecycle hooks that help us in every situation where we would like to write some code on a specific events.

For example, if you would like to do some initialization stuff for any external libraries, you can do that in ngOnInit hook.

Therefore, I’d recommend understanding Angular 4 lifecycle hooks to create more productive angular apps.


Angular 4 Lifecycle Hooks - Overview

Each interface has a single hook method whose name is the interface name plus prefixed with ng.

So, before using interface method, we must have to implement the respective interface.

For example, the OnChange interface has a hook method named ngOnChange() that Angular calls shortly after creating the component. Evermore, it’s required to import SimpleChanges for OnChange method only.

Would you like to create your first Angular 4 App? Take me to Angular 4 Hello World

ngOnInit()

ngOnInit is there to give us a signal that Angular has finished initializing the component and now we can perform our needed operations.

Therefore, I consider it as one of the important hooks from a list of Angular 4 lifecycle hooks and very useful, as well.

ngOnInit(){
    console.log("ngOnInit called");
}

ngOnChanges()

ngOnChanges called before ngOnInit() and whenever one/more data-bound input properties change.

It means, whenever any input properties changed than the code under this function will be triggered.

ngOnChange(changes: SimpleChanges){
    console.log("ngOnChange called");
    console.log(changes);
}

ngDoCheck()

ngDoCheck is know as a detector because it’s called whenever any changes during the app execution happened.

Also, it’s detect the changes which angular doesn’t able to detect those explicit changes.

In addition, it’s called immediately after ngOnChange and ngOnInit.

ngDoCheck(){
    console.log("ngDoCheck called");
}

ngAfterContentInit()

ngAfterContentInit, as name suggested, it responds when the angular app projects content into the component’s view and the view is ready.

It called once after the first ngDoCheck().

It is also known as a component-only hook.

ngAfterContentInit(){
    console.log("ngAfterContentInit called");
}

ngAfterContentChecked()

ngAfterContentChecked, as it’s name suggested it respond after app checks the content actually projected into the component.

It called after ngAfterContentInit and every subsequent check.

ngAfterContentChecked(){
    console.log("ngAfterContentChecked called");
}

ngAfterViewInit()

ngAfterViewInit, responds after app initialized and all the views of component has been ready.

It called once after the first ngAfterContentChecked.

ngAfterViewInit(){
    console.log("ngAfterViewInit called");
}

ngAfterViewChecked()

ngAfterViewChecked, responds after app checks all the parent and child views of components.

It called after the ngAfterViewInit and every subsequent call of ngAfterContentChecked

ngAfterViewChecked(){
    console.log("ngAfterViewChecked called");
}

ngDestroy()

ngDestory, as it’s name suggested, it will use to do cleanup just before angular app destroys everything.

Furthermore, it will detach the events, unsubscribe the Observables, etc to avoid any memory leaks.

It called just before angular app destors everything like the directive and components.

ngDestroy(){
    console.log("ngDestroy called");
}

Furthermore, visit Angular Lifecycle Hooks

Moreover, I hope you understand the 8 types of Angular 4 Lifecycle hooks.

Feel free to share your comments below, if you’ve any questions/suggestions.

Finally, don’t forget to share this article!

Happy Coding!

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of