Angular Lifecycle

Angular call life cycle hook method when you create/modify/destroy components and directives.
there are eight angular hook methods.

constructor():- Firstly constructor calls when you load the component on the DOM, constructor loads on the DOM before Angular hook methods.

Angular Component Lifecycle Hooks

1. ngOnChanges()

When It’s Called: Invoked whenever an input property bound to the component changes. It runs after the constructor and before ngOnInit.

Use Case: React to changes in input properties. It receives a SimpleChanges object containing the current and previous values of the changed properties.

2. ngOnInit()

When It’s Called: Called once, after the first ngOnChanges. This is the ideal place to perform component initialization, such as fetching data from a service.

Use Case: Initialize the component, set up the component’s state, and fetch initial data.

3. ngDoCheck()

When It’s Called: Called during every change detection cycle. It allows developers to implement custom change detection logic.

Use Case: Perform manual checks on the component’s state that Angular’s built-in change detection might not catch.

4. ngAfterContentInit()

When It’s Called: Triggered once after Angular projects external content into the component’s view (i.e. after the content has been inserted via <ng-content>).

Use Case: Work with projected content once it has been initialized.

5. ngAfterContentChecked()

When It’s Called: Called after every check of the content projected into the component. It runs after ngAfterContentInit and every subsequent change detection cycle.

Use Case: Respond to changes in the projected content.

6. ngAfterViewInit()

When It’s Called: Called once after Angular initializes the component’s view and its child views.

Use Case: Perform actions related to the view or child components, such as interacting with the DOM.

7. ngAfterViewChecked()

When It’s Called: Called after every check of the component’s view and child views. It runs after ngAfterViewInit and every subsequent change detection cycle.

Use Case: Respond to changes in the view or child views.

8. ngOnDestroy()

When It’s Called: Invoked just before Angular destroys the component or directive. This is the final lifecycle hook.

Use Case: Clean up resources, unsubscribe from observables, detach event handlers, and perform other cleanup tasks to avoid memory leaks.

Angular Lifecycle – Interview Questions

Angular Lifecycle – Objective Questions (MCQs)