Angular Component Lifecycle Hooks Overview
Tags: angular, webdev, programming, javascript
Published: 2021-01-23 00:16:49

**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.