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.