Angular component life cycle events

[reboottime]

Angular component life cycle events

constructor

used only when you want to inject some services

Details

1. ngOnChanges: This hook is called whenever one or more data-bound input properties of a directive or a component changes. It receives a SimpleChanges object containing the previous and current values of the input properties.

   When to use: Use this hook when you need to react to changes in input properties.

2. ngOnInit: This hook is called after Angular has initialized all data-bound properties of a directive. It is a good place to perform initialization logic for your component.

   When to use: Use this hook when you need to set up the initial state of your component or perform one-time initialization tasks.

3. ngDoCheck: This hook is called during every change detection cycle. It allows you to perform your own custom change detection logic.

   When to use: Use this hook when you need to implement custom change detection or perform more granular change detection.

4. ngAfterContentInit: This hook is called after Angular has projected external content (e.g., content passed between component tags).

   When to use: Use this hook when you need to perform initialization logic that relies on content projection.

5. ngAfterContentChecked: This hook is called after Angular has checked the content projected into the component.

   When to use: Use this hook when you need to perform additional checks or logic after Angular has checked the content.

6. ngAfterViewInit: This hook is called after Angular has initialized the component's views and child views.

   When to use: Use this hook when you need to perform initialization logic that relies on the view or its child views.

7. ngAfterViewChecked: This hook is called after Angular has checked the component's views and child views.

   When to use: Use this hook when you need to perform additional checks or logic after Angular has checked the views.

8. ngOnDestroy: This hook is called just before Angular destroys the component. It is a good place to clean up resources, unsubscribe from observables, etc.

   When to use: Use this hook when you need to clean up resources or perform any necessary cleanup before a component is destroyed.

Real-world Usage Examples:

1. ngOnInit: Use this hook to fetch initial data from a server or set up initial state based on input properties.

2. ngOnChanges: Use this hook to react to changes in input properties. For example, if you have a component that displays user details, you can use this hook to update the display whenever the user data changes.

3. ngAfterViewInit: Use this hook when you need to interact with the DOM or perform operations that require the view to be fully initialized. For example, if you need to work with a specific element in the template, this is the appropriate hook.

4. ngOnDestroy: Use this hook to clean up resources like subscriptions to observables or event listeners to prevent memory leaks.

Remember, the choice of which lifecycle hook to use depends on the specific requirements of your application and component. Use the appropriate hooks to manage the state and behavior of your components effectively.