Angular is a widely used server-side platform used by many developers with the emergency of the angular platform to build a mobile and web application.
The platform was introduced by Google back in 2009. The first version of angular known as AngularJS was extensively popular and dependant on HTML and javascript. Later angular Javascript got replaced by Angular TypeScript and other scripting languages.
Angular has given the developers the freedom to develop applications that can run on the web, mobiles, and desktop. With time Angular has undergone many modifications and has introduced many versions after AngularJS to Angular10 and still counting.
What is Angular Lifecycle?
Each Angularjs component goes through 8 phases in its lifecycle. When it is initialized, it creates and presents its root components. It is designed and it produces its heirs. The components that get loaded during application development, it keeps checking when the data binding properties are getting changed and updated. When the component is not used anymore, it approaches the death phase and is decimated and expelled from the DOM.
Angular components are the primary building block for any angular version. So it becomes of utmost importance to understand the processing steps of the lifecycle components, then only it can be implemented in the application development using Angular.
Each angular component in it has a lifecycle. And every stage of the lifecycle goes from initialization to destruction. It has eight different stages.
Hooks for the components
1)constructor
This is invoked when Angular creates a component or directive by calling new on the class.
2)ngOnChanges
Invoked every time there is a change in one of the input properties of the component.
Properties:
- It can be utilized practically in all the components that have input.
- Gets invoked whenever the input value gets changed.
It gets the initial call to get raised before ngOnInit.
3)ngOnInit
Invoked when given component has been initialized.
This hook is only called once after the first ngOnChanges
Properties:
- This hook initializes data for a component.
- After setting the input values, this hook gets its call.
- This hook is added by default by Angular CLI to all the components.
- It is called only for once.
4)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.
Properties:
- Run by Angular to detect any changes.
- Called for change detection.
Important
ngDoCheck and ngOnChanges should not be implemented together on the same component.
5)ngAfterContentInit
Invoked after Angular performs any content projection into the component’s view (see the previous lecture on Content Projection for more info).
Properties:
- After ngDoCheck it is called initially.
- It does its work by initializing the content.
6)ngAfterContentChecked
Invoked each time the content of the given component has been checked by the change detection mechanism of Angular.
Properties:
- This method waits for ngContentInit to finish its execution to get started.
- Executed after all ngDocheck.
7)ngAfterViewInit
Invoked when the component’s view has been fully initialized.
Properties:
- After the initialization of view, it gets its call only for once.
8)ngAfterViewChecked
Invoked each time the view of the given component has been checked by the change detection mechanism of Angular.
Properties:
- After the checking and initialization are done, this gets its called.
- After every ngAfterContentChecked method finishes its job, this method starts its work.
9)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.
Properties:
- Gets its call just before components get removed from DOM.
How can you make use of Angular lifecycle hooks?
- First, you have to import the hook interface.
- In the hook interface, you ought to announce the component or directive.
- Next, you ought to generate the hook method.
Import hook interface using : export class SpyDirective implements OnInit, OnDestroy { ….}; @angular/core';
Statement of the component that actualizes lifecycle hooks :
In the subsequent stages, you need to characterize the App component that executes the OnInit interface. The code structure for that is given below.
//export class AppComponent {Â ,
Generating the hook components
One thing that you should remember is the “hook” and “hook method” must have a similar name.
Right at the point when the components are made the hooks are implemented in the associated way depicted under –
However, the arrangement of execution gets some expansion in it when components with the child are created.
Now for the child component again we have to run
Here again, joins the parent After ViewInit.
Conclusion
In the above article, I have discussed the lifecycle hooks and their sequence in which they occur in the lifecycle of a component or a directive. One thing you should remember is these lifecycle hooks apply to both components and directives.
Read more articles –
