Angular : Event loop for Lifecycle hook

In this article, we are going to understand how the javascript event loop is related to Angular change detection which is internally related to Angular's lifecycle hooks.

First, let's understand how angular change detection is related to its lifecycle hooks. In Angular, lifecycle hooks are methods provided by the Angular framework that allows you to tap into different stages or events in the lifecycle of a component. These hooks provide opportunities to perform actions or execute code at specific points during the component's creation, rendering, and destruction process. From a JavaScript point of view, Angular's lifecycle hooks can be understood as methods that are invoked at specific moments in the component's lifespan.

Let's explore the different lifecycle hooks available in Angular and understand how they work:

1. ngOnChanges:

- This hook is called when the component receives input properties from its parent component.

- It provides a simple way to respond to changes in input properties.

- method signature : ngOnChanges(changes: SimpleChanges): void

2. ngOnInit:

- This hook is called once after the component has been initialized and its inputs have been resolved.

- It is commonly used for initialization tasks, such as retrieving data from a server.

- method signature : ngOnInit(): void

3. ngDoCheck:

- This hook is called during every change detection cycle of the component.

- It allows you to implement custom change detection logic.

- method signature : ngDoCheck(): void

4. ngAfterContentInit:

- This hook is called after the component's content has been projected into its view.

- It is useful when you need to perform actions based on projected content.

- method signature : ngAfterContentInit(): void

5. ngAfterContentChecked:

- This hook is called after the component's projected content has been checked.

- It is useful when you need to perform actions after the projected content has been verified.

- method signature : ngAfterContentChecked(): void

6. ngAfterViewInit:

- This hook is called after the component's view has been initialized.

- It is useful when you need to perform actions that require access to the component's view and child views.

- method signature : ngAfterViewInit(): void

7. ngAfterViewChecked:

- This hook is called after the component's view and child views have been checked.

- It is useful when you need to perform actions after the views have been verified.

- method signature : ngAfterViewChecked(): void

8. ngOnDestroy:

- This hook is called just before the component is destroyed.

- It is used for performing cleanup tasks such as unsubscribing from observables and releasing resources.

- method signature : ngOnDestroy(): void

The lifecycle hooks work by leveraging JavaScript's object-oriented nature and Angular's change detection mechanism. When a component is created, Angular instantiates it as a JavaScript object and initializes its properties and bindings. Throughout the component's lifecycle, Angular invokes the relevant lifecycle hook methods at the appropriate times, providing you the opportunity to perform custom logic.

For example, when a component receives new input properties, Angular invokes the ngOnChanges hook and passes an object containing the changes. You can then respond to these changes by updating the component's state or triggering additional actions.

Similarly, when the component's view is initialized, Angular invokes the ngAfterViewInit hook, allowing you to access the component's view and perform any necessary operations. This is commonly used when interacting with the DOM or external libraries that require access to the rendered view.

Finally, when the component is about to be destroyed, Angular calls the ngOnDestroy hook, giving you a chance to clean up any resources or subscriptions to prevent memory leaks.

By leveraging these lifecycle hooks, you can manage the behavior and state of your Angular components at different stages of their lifecycle, ensuring proper initialization.

Now let's understand what role does event loop plays and how event loop, change detection, and life cycle hooks are related.

1. Event Loop in JavaScript:

The event loop is a mechanism in JavaScript that handles asynchronous operations and ensures that the application remains responsive.

It continuously checks for tasks in the event queue and executes them one by one. This allows JavaScript to handle non-blocking operations effectively.

2. Change Detection in Angular:

Change detection is a core mechanism in Angular that updates the view whenever there are changes in the application's data.

Angular uses a strategy called "zone-based change detection" to track changes. The zone.js library is responsible for intercepting asynchronous operations and triggering change detection.

Whenever there is an event or an asynchronous operation (such as a timer, HTTP request, or user interaction) in an Angular application, it is captured by the event loop. The event loop pushes the corresponding task into the event queue.

3. Lifecycle Hooks in Angular:

Angular provides lifecycle hooks that allow you to tap into specific moments during the component's lifecycle. These hooks include `ngOnInit`, `ngOnChanges`, `ngDoCheck`, `ngAfterViewInit`, `ngAfterViewChecked`, etc.

When a component is created or undergoes changes, Angular triggers the corresponding lifecycle hooks. For example, `ngOnInit` is called after the component's data-bound properties have been initialized, and `ngOnChanges` is called when the component's input properties change.

4. Interaction between Event Loop, Change Detection, and Lifecycle Hooks:

When an event or an asynchronous operation occurs, such as a button click or an HTTP request, it triggers an event in JavaScript.

The event loop captures this event and adds it to the event queue. Angular's zone.js intercepts these events and triggers change detection.

During change detection, Angular checks the component tree for any changes in the data and updates the view accordingly.

This includes executing the relevant lifecycle hooks based on the component's state.

The event loop and change detection work together to ensure that Angular components are updated properly and the view reflects the latest data.

Whenever change detection is triggered, Angular runs the necessary lifecycle hooks to handle the component's lifecycle events.

In summary, JavaScript's event loop captures events and triggers change detection in Angular. The change detection process checks for changes in the data and updates the view accordingly. During this process, Angular also invokes the appropriate lifecycle hooks to handle component lifecycle events.