A Comprehensive Guide to Angular Lifecycle Hooks: Managing Your Apps Behavior

Article by: Manish Methani

Last Updated: September 14, 2021 at 10:04am IST
16 min 15 sec

Table of Contents:

Angular is a popular framework for building dynamic web applications. One of its key features is lifecycle hooks, which allow developers to control and manage component behavior at specific moments in time. In this comprehensive guide, we will explore Angular's lifecycle hooks, understand their types, and learn how to use them effectively in your applications.

1. Introduction

Angular is a powerful framework for creating dynamic web applications, and understanding its lifecycle hooks is essential for harnessing its full potential. This guide will take you through everything you need to know about Angular's lifecycle hooks.

2. Understanding Angular Components

Before diving into lifecycle hooks, it's crucial to understand Angular components. In Angular, components are the building blocks of your application. They consist of a TypeScript class and an HTML template.

Components represent different parts of your application, such as headers, footers, sidebars, and content sections. Angular's lifecycle hooks provide you with a way to interact with components at various stages of their lifecycle.

3. Angular Lifecycle Hooks Overview

What are Angular Lifecycle Hooks?

Angular components have a lifecycle, which means they go through different phases from creation to destruction. Angular lifecycle hooks are functions provided by the Angular framework that allow you to tap into these phases. These hooks enable you to perform tasks at specific moments in a component's lifecycle.

4. Types of Angular Lifecycle Hooks

Angular offers several types of lifecycle hooks, and each serves a unique purpose. Let's explore these hooks:

ngOnChanges

The ngOnChanges hook is called whenever an input property of a component changes. You can use it to respond to input changes and perform necessary actions.

import { Component, OnChanges, Input } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: 'My Component',
})
export class MyComponent implements OnChanges {
  @Input() data: any;

  ngOnChanges() {
    // Perform actions when input properties change
  }
}

ngOnInit

The ngOnInit hook is called after the component has been initialized. It's a great place to perform component initialization tasks.

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

@Component({
  selector: 'app-my-component',
  template: 'My Component',
})
export class MyComponent implements OnInit {
  ngOnInit() {
    // Perform initialization tasks here
  }
}

ngDoCheck

ngDoCheck is called during every change detection run. It allows you to detect and respond to changes that Angular can't automatically detect.

import { Component, DoCheck } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: 'My Component',
})
export class MyComponent implements DoCheck {
  ngDoCheck() {
    // Detect and respond to changes here
  }
}

ngOnDestroy

The ngOnDestroy hook is called just before a component is destroyed. It's useful for cleaning up resources and performing cleanup tasks.

import { Component, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: 'My Component',
})
export class MyComponent implements OnDestroy {
  ngOnDestroy() {
    // Perform cleanup tasks before the component is destroyed
  }
}

These are just a few examples of Angular's lifecycle hooks. Each hook serves a specific purpose, and understanding when and how to use them is crucial for effective Angular development.

Building a Simple Angular App

Lets build a simple tdo-list angular app from scratch.

Final Output:

Setting Up Your Angular Environment

Before we start building our app, let's make sure you have the Angular CLI installed. If it's not installed, you can do so by running the following command in your terminal:

npm install -g @angular/cli

This command will install the Angular CLI globally on your system, making it available for creating and managing Angular projects.

Creating the To-Do Component

Let's create a new Angular component for our to-do list application. Using the Angular CLI, run the following command in your terminal:

ng generate component todo-list

This command generates a new component named todo-list in your Angular project. You can find this component in the src/app directory.

Using ngOnInit for Data Initialization

In our todo-list component, we'll use the ngOnInit hook to initialize our to-do list data. Here's an example of how this might look in your component:

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

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {
  todos: string[] = [];

  ngOnInit(): void {
    // Initialize the to-do list with some sample tasks
    this.todos = ['Buy groceries', 'Finish Angular app', 'Go for a run'];
  }
}

In this code, we've defined the todos array and initialized it with some sample to-do items in the ngOnInit hook.

Implementing ngOnDestroy

While our to-do list example doesn't involve subscriptions, it's a good practice to implement the ngOnDestroy hook when dealing with observables or other resources that need to be cleaned up. You can unsubscribe from observables and perform other cleanup tasks in this hook.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit, OnDestroy {
  todos: string[] = [];
  private subscription: Subscription;

  ngOnInit(): void {
    // Initialize the to-do list with some sample tasks
    this.todos = ['Buy groceries', 'Finish Angular app', 'Go for a run'];

    // Subscribe to an observable
    this.subscription = someObservable.subscribe(data => {
      // Handle data
    });
  }

  ngOnDestroy(): void {
    // Unsubscribe from the observable to prevent memory leaks
    this.subscription.unsubscribe();
  }
}

Complete Code Example

You can find the complete code for our to-do list component in the todo-list.component.ts file. Here's how the code might look in its entirety:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit, OnDestroy {
  todos: string[] = [];
  private subscription: Subscription;

  ngOnInit(): void {
    // Initialize the to-do list with some sample tasks
    this.todos = ['Buy groceries', 'Finish Angular app', 'Go for a run'];

    // Subscribe to an observable
    this.subscription = someObservable.subscribe(data => {
      // Handle data
    });
  }

  ngOnDestroy(): void {
    // Unsubscribe from the observable to prevent memory leaks
    this.subscription.unsubscribe();
  }
}

HTML code :

  <!-- todo-list.component.html -->
  <div class="todo-container">
    <h2>To-Do List</h2>
    <ul class="todo-list">
      <li *ngFor="let todo of todos">{{ todo }}</li>
    </ul>
  </div>

HTML code for displaying the to-do list along with some simple CSS to style the UI:

Now, let's add some CSS to style the to-do list:

/* todo-list.component.css */

.todo-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.todo-container h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.todo-list {
  list-style-type: none;
  padding: 0;
}

.todo-list li {
  font-size: 18px;
  margin: 10px 0;
  padding: 10px 20px;
  background-color: #e0e0e0;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Add some hover effect for the to-do items */
.todo-list li:hover {
  background-color: #c0c0c0;
  transition: background-color 0.3s ease;
}

Final Output:

In this code, we've created a basic to-do list container with a title and a styled list of to-do items. The CSS provides a clean and minimalistic design with hover effects for the to-do items.

6. Best Practices and Tips

When working with Angular lifecycle hooks, consider the following best practices and tips:

Avoid Heavy Operations in ngOnInit

While you can perform initialization tasks in the ngOnInit hook, avoid heavy operations that might slow down your application's startup. It's essential to keep this hook focused on lightweight setup tasks.

Use ngOnDestroy to Prevent Memory Leaks

In components with subscriptions to observables, always unsubscribe in the ngOnDestroy hook. Failing to unsubscribe can lead to memory leaks, which can degrade the application's performance over time.

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-my-component',
  template: 'My Component',
})
export class MyComponent implements OnDestroy {
  private subscription: Subscription;

  constructor() {
    this.subscription = someObservable.subscribe((data) => {
      // Handle data
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Use the Appropriate Hook for Your Use Case

Choose the right lifecycle hook for your specific use case. For example, if you need to respond to changes in input properties, use ngOnChanges. If you're performing one-time initialization, use ngOnInit.

Avoid Frequent Use of ngDoCheck

Overusing ngDoCheck can lead to performance issues, as it runs frequently. Only use this hook when you need to perform custom change detection beyond Angular's default mechanism.

Optimize Performance

As your application grows, focus on optimizing performance. Use profiling tools to identify bottlenecks and apply performance enhancements accordingly.

7. Conclusion

In Angular development, understanding and effectively using lifecycle hooks is essential. They provide the necessary control and flexibility to manage component behavior throughout its lifecycle.

By mastering these hooks and applying best practices, you can build Angular applications that are not only functional but also performant and maintainable.