Component Lifecycle
The three phases are: creates, updates, and destroys.
A component instance has a lifecycle that starts when Angular instantiates the component class and renders the component view along with its child views. The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as needed. The lifecycle ends when Angular destroys the component instance and removes its rendered template from the DOM. Directives have a similar lifecycle, as Angular: creates, updates, and destroys instances in the course of execution.
Component Lifecycle Hook
Respond to events in the lifecycle of a component or directive by implementing one or more of the lifecycle hook interfaces in the Angular core library. The hooks give you the opportunity to act on a component or directive instance at the appropriate moment, as Angular creates, updates, or destroys that instance.
After your application instantiates a component or directive by calling its constructor, Angular calls the hook methods you have implemented at the appropriate point in the lifecycle of that instance.
Angular executes hook methods in the following sequence. Use them to perform the following kinds of operations.
| STT | hook method | Details |
|---|---|---|
| 1 | ngOnChanges |
When an input or output binding value changes. Respond when Angular sets or resets data-bound input properties. This happens frequently, so any operation you perform here impacts performance significantly. Called before |
| 2 | ngOnInit |
After the first 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 |
| 3 | ngDoCheck |
Developer's custom change detection. Detect and act upon changes that Angular can't or won't detect on its own. Called immediately after |
| 4 | ngAfterContentInit |
After component content initialized. 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 |
| 5 | ngAfterContentChecked |
After every check of component content. Respond after Angular checks the content projected into the directive or component. Called after |
| 6 | ngAfterViewInit |
After the views of a component are initialized. Respond after Angular initializes the component's views and child views, or the view that contains the directive. Called once after the first |
| 7 | ngAfterViewChecked |
After every check of the views of a component. Respond after Angular checks the component's views and child views, or the view that contains the directive. Called after the |
| 8 | ngOnDestroy |
Just before the directive is destroyed. Cleanup just before Angular destroys the directive or component. Unsubscribe Observables and detach event handlers to avoid memory leaks. See details in Cleaning up on instance destruction in this document. Called immediately before Angular destroys the directive or component. |