Angular Component life cycle methods or hooks

In Angular, component lifecycle hooks are methods that provide visibility into the lifecycle events of a component. These hooks allow you to perform actions at specific moments in a component's lifecycle, such as initialization, change detection, content projection, and destruction. Here are the main lifecycle hooks available in an Angular component:


  1. ngOnChanges: Called whenever one or more data-bound input properties change. Receives a SimpleChanges object containing the previous and current property values.
  2. ngOnInit: Invoked once, after the first ngOnChanges. This hook is used for initialization logic such as fetching initial data from a service.

Content Projection (View Initialization)

  • ngDoCheck: Called during every change detection cycle. Use this hook to perform your own custom change detection.

Component Interaction

  1. ngAfterContentInit: Called once after the component's content has been initialized. It's used when your component depends on external content provided through ng-content.
  2. ngAfterContentChecked: Called after the ngDoCheck and every subsequent check of the component's content. It's useful for performing operations after Angular checks the content projected into the component.
  3. ngAfterViewInit: Invoked once after the component's view (and child views) have been initialized. Use it for operations that require the component's view to be fully initialized.
  4. ngAfterViewChecked: Called after ngAfterContentChecked and every subsequent check of the component's view. Use this hook for additional logic that needs to be executed after the view and its children have been checked.


  • ngOnDestroy: Invoked just before the component is destroyed. Use it for cleanup logic such as unsubscribing from observables to avoid memory leaks.
                    import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
                      selector: 'app-example',
                      templateUrl: './example.component.html',
                      styleUrls: ['./example.component.css']
                    export class ExampleComponent implements OnInit, OnDestroy, OnChanges {
                      // Input property
                      @Input() data: any;
                      constructor() { }
                      ngOnInit(): void {
                        // Initialization logic, data fetching, etc.
                      ngOnChanges(changes: SimpleChanges): void {
                        // React to changes in input properties
                      ngDoCheck(): void {
                        // Custom change detection logic
                      ngAfterContentInit(): void {
                        // After component content initialization
                      ngAfterContentChecked(): void {
                        // After content check
                      ngAfterViewInit(): void {
                        // After view initialization
                      ngAfterViewChecked(): void {
                        // After view check
                      ngOnDestroy(): void {
                        // Cleanup logic

Understanding and utilizing these lifecycle hooks enables you to manage component initialization, perform specific tasks at various stages, and handle cleanup activities effectively in your Angular applications.

How to Handle Form Inputs Efficiently with Express-Validator in ExpressJs

Using express-validator in Express.js can help you handle form inputs efficiently by validating and sanitizing user input. Here's a basic guide on how to use express-validator: Install Dependencies: First, install express-validator along with express …

read more

How To Use JSON.parse() and JSON.stringify

JSON.parse() and JSON.stringify() are two important functions in JavaScript for working with JSON data. JSON.parse() is used to parse a JSON string and convert it into a JavaScript object. function that will be called for each key-value pair in the …

read more