Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

Angular front-end framework made by Google. Like other popular front-end frameworks, it uses a component-based architecture to structure apps.

In this article, we’ll take a look at the lifecycle hooks of an Angular component.

Lifecycle Hooks

Angular components have a lifecycle managed by Angular.

Angular offers lifecycle hooks to provide visibility to key events of a component and act when a lifecycle event occurs.

We can implement one or more lifecycle interfaces in our component so that we can make sure our components run code during certain lifecycle events.

No directive or component will implement all lifecycle hooks. Angular only calls a directive or component if it’s defined.

For example, we can implement the OnInit interface to run some code when the component is initialized as follows:

import { Component, OnInit } from "@angular/core";

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent implements OnInit {  
  ngOnInit() {  
    console.log("init");  
  }  
}

In the code above, we imported the OnInit interface and then implemented the ngOnInit method.

Lifecycle Sequence

Angular calls the lifecycle hook methods in the following sequence at specific moments.

ngOnChanges()

Responds when Angular sets or resets data-bound input properties. This method receives a SimpleChanges object of the current and previous property values.

It’s called before ngOnInit and whenever one or more data-bound input properties change.

ngOnInit()

Initializes the component or directive after Angular displays the data-bound properties and sets the directive or component’s input properties.

It’s called once after the first ngOnChanges.

ngDoCheck()

Detect and act upon changes that Angular can’t or won’t detect on its own.

It’s called during every change detection run and immediately after ngOnChanges and ngOnInit.

ngAfterContentInit()

Runs after Angular projects external content into the component’s view or the view that the directive is in.

It’s called once after the first ngDoCheck.

ngAfterContentChecked()

Runs after Angular checks the content projected into the directive or component.

It’s called after ngAfterContentInit and every subsequent ngDoCheck.

ngAfterViewInit()

Runs after Angular initializes the component’s view and child views or the view the directive is in.

It’s called once after the first ngAfterContentChecked.

ngAfterViewChecked()

Runs after Angular component checks the component’s view and child views or the view that a directive is in.

It’s called after the ngAfterViewInit and every subsequent ngAfterContentChecked.

ngOnDestroy()

Cleans up just before Angular destroys the directive or component. Unsubscribe Observables and detach event handlers to avoid memory leaks.

It’s called just before Angular destroys the directive or component.

Interfaces are Optional

Interfaces are optional since it doesn’t appear in the JavaScript since JavaScript doesn’t have interfaces.

The hooks are just called if they’re defined.

However, implementing them means that we won’t forget to implement the hooks that we want to implement.

Other Angular Lifecycle Hooks

Other Angular subsystems may implement their own hooks.

3rd party libraries may also implement their hooks.

OnInit()

Use ngOnInit to perform complex initialization shortly after construction or to set up the component after Angular sets the input properties.

Therefore, we shouldn’t fetch data in the constructor. We should do no more than initialize local variables with simple values in the constructor.

OnDestroy()

We should put cleanup logic in ngOnDestroy. Anything that must be run before Angular destroys the directive should be in here.

This is a place to free resources that won’t be garbage collected automatically.

We should unsubscribe from Observable and DOM events here.

OnChanges()

Whenever input properties change, the ngOnChanges hook is called.

The old and new values are in the SimpleChange object that’s passed into the parameter.

DoCheck()

Use ngDoCheck to detect and act upon changes that Angular doesn’t catch on its own.

Usually, changes from unrelated data elsewhere on the page isn’t detected by Angular, so we have to run something here to update those values.

AfterViewInit() and AfterViewChecked()

AfterViewInit is called after the component or directive is loaded along with the child views.

AfterViewChecked is called right after ngAfterViewInit.

AfterContent Hooks

AfterContent hooks are similar to AfterView hooks. The difference is that AfterView hooks concern ViewChildren , which are child components whose element tags appear within the component’s template.

AfterContent hooks concern ContentChildren, which are child components that Angular projected into the component.

Conclusion

We can use the hooks to run code during various stages of the Angular component or directive’s lifecycle.

They run in a sequence. We can implement them by implementing the interfaces or just define the methods with the given names in our component or directive class.