Angular: Introduction to Lifecycle Hooks

Any angular developer old or new knows that angular transitioned to a component based architecture since it changed from angular.js to Angular. This is not a post on the overall architecture, it is about lifecycle hooks in angular.

As per angular's official documentation, a component instance has a lifecycle that starts when Angular instantiates the component class and renders the component view along with its child views. The lifecycle ends when Angular destroys the component instance and removes its rendered template (view) from the DOM. In a other to make use or to tap into the key events of a component's lifecycle, lifecycle hooks are used.

What are Lifecycle Hooks?

They are methods that angular invokes on the directives and components as it creates, changes, and destroys them. They are nothing but timed methods or callback functions that have an order of execution that never changes. Angular gives us 8 hooks to allow us to tap into the lifecycle of components and trigger actions at specific points in the lifecycle. We are going to look at some of these hooks in the order in which they are executed.

1. ngOnChanges

   This method is invoked or called when modifications occur on data-bound input properties. Data bound by the @Input() decorator come from an external source. When the external source alters that data in a detectable manner, it passes through the @Input property again. The hook receives a SimpleChanges object that contains the previous and current values for the data-bound inputs properties. This hook gets called so often, that it is recommended you limit the amount of processing it does.

2. ngOnInit

   This hook is called once upon initialization of the component. It is fired only once and this is done immediately after its creation (during the first change detection). This hook is the perfect place to add any initialization logic in a component's lifecycle.

3. ngDoCheck

   ngDoCheck fires with every change detection cycle. it is used to detect and act upon changes that Angular can't or won't detect on its own. Since it is invoked at every change detection cycle, it is optimal to keep what it does to the minimum to boost performance.

4. ngAfterContentInit

   It is called after Angular projects external content into the component's view, or into the view that a directive is in. It is invoked once after the first ngDoCheck().

5. ngAfterContentChecked

   ngAfterContentChecked Life cycle hook is called after Angular checks the content projected into the directive or component. Angular calls this hook even if there is no projected content in the component. ngAfterContentChecked can fire frequently and cause performance issues if poorly implemented.

6. ngAfterViewInit

   This hook is called after the Component’s View & all its child views are fully initialized. It is called during the first change detection cycle, where angular initializes the view for the very first time.

7. ngAfterViewChecked

   This hook called after a component’s view or child view is checked. It is called after the ngAfterViewInit() and every subsequent ngAfterContentChecked(). ngAfterViewChecked is very similar to the ngAfterViewInit hook. Both are called after all the child components and directives are initialized and updated. The only difference between them is that ngAfterViewChecked is raised during every change detection cycle. While ngAfterViewInit during the first change detection cycle.

8. ngOnDestroy

   This hook is called once when the component is being destroyed. It is a good hook to use to cleanup and unsubscribe from observables. It is called immediately before Angular destroys the directive or component.

This post is just an introduction to angular's lifecycle hooks, there is a lot more to learn about how to use these hooks. For a deep dive into these topics, check out the referenced articles and documentations.

• Angular Official Documentation
• Digital Ocean Lifecycle Hooks Tutorial
• and this post on freecodecamp

Thank you for reading this article, please do well to like, comment and share if this was helpful. Bye!! 👋🏾👋🏾