Lifecycle hooks
Hooks for the Component
Constructor
Constructor
This is invoked when Angular creates a component or directive by calling new
on the class.
ngOnChanges
ngOnChanges
Invoked every time there is a change in one of the input properties of the component.
ngOnInit
ngOnInit
Invoked when the given component has been initialized.
This hook is only called once after the first ngOnChanges
ngDoCheck
ngDoCheck
Invoked when the change detector of the given component is invoked. It allows us to implement our own change detection algorithm for the given component.
ngDoCheck
andngOnChanges
should not be implemented together on the same component.
ngOnDestroy
ngOnDestroy
This method will be invoked just before Angular destroys the component. Use this hook to unsubscribe observables and detach event handlers to avoid memory leaks.
Hook method | Purpose | Timing |
| Respond when Angular sets or resets data-bound input properties. | Called before Note that if your component has no inputs or you use it without providing any inputs, the framework will not call |
| Initialize the directive or component after Angular first displays the data-bound properties and sets the directive or component's input properties. | Called once, after the first |
| Detect and act upon changes that Angular can't or won't detect on its own. | Called immediately after |
| Respond after Angular projects external content into the component's view, or into the view that a directive is in. | Called once after the first |
| Respond after Angular checks the content projected into the directive or component. | Called after |
| Respond after Angular initializes the component's views and child views, or the view that contains the directive. | Called once after the first |
| Respond after Angular checks the component's views and child views, or the view that contains the directive. | Called after the |
| Cleanup just before Angular destroys the directive or component. Unsubscribe Observables and detach event handlers to avoid memory leaks. | Called immediately before Angular destroys the directive or component. |
Last updated