ANGULAR LIFECYCLE
Angular is a prevalent, broadly used client-side platform that has won millions of developer’s hearts in recent years. With the emergence of the Angular platform, application building has become extensively easy both for web and mobile. There are new versions emerging each year and Angular lifecycle keeps on evolving.
You have to understand the lifecycle with the result in mind to have the smooth progress of your application. The most exciting thing that you will notice in Angular is each, and every component in it has a lifecycle, and every stage of a lifecycle goes from initialization to destruction. A component lifecycle goes typically through eight different stages.
A component has a lifecycle managed by Angular.component is a TypeScript class, every component must have a constructor method. The constructor of the component class executes, first, before the execution of any other lifecycle hook events.
Following is a description of each lifecycle hook:
ngOnChanges :-
- For the changed input property of a component, ngOnChange is invoked (Developers use this hook to discover the details about the input property that has been changed and how it got changed).
- Using this lifecycle hook a Parent component can easily communicate with its child component if the property decorator exposes @InputDecorator of the child component.
Gets invoked whenever the input value gets changed.
ngOnInit :-
- When first time the data-bound properties are displayed and here we set the input property values.
- This event gets its call only after ngOnChanges event and after the constructor & It is called only for once.
- With this hook, you can initialize logic to your component.
ngDoCheck :-
- This is for the detection and to act on changes that Angular can’t or won’t detect on its( or Called whenever angular change detection run)
- This hook comes on demand instantly after ngOnInit, and this hook has its duty of execution even if there is no change in the property of a component.
ngAfterContentInit :-
- This method is implemented as soon as Angular makes any content projection within a component view.
- This is called in response after Angular projects external content into the component’s view.
- External child components can be included by Angular using this method within the <ng-content> </ng-content> tag. In the total lifecycle of a component, this hook gets call only for once.
ngAfterContentChecked :-
- This is called in response after Angular checks the content projected into the component ( This is the changes detection check for the contents projected).
- It gets its call after ngAftercontentInit and also gets executed after every execution ngDoCheck. It plays a big role in the initialization of the child component.
ngAfterViewInit :-
- This lifecycle method gets its call after ngAfterContentChecked and finds its use only on components.
- This is very much similar to ngAfterContentInit, and it gets invoked only after all the component view and its child view.
ngAfterViewChecked :-
- This Once the default changes detection run and content projected change detection run then this event fires .
- When something is awaited from the child component, this component can be helpful.
- It gets call Called after the ngAfterViewInit and every subsequent ngAfterContentChecked.
ngOnDestroy :-
- This is the clean-up phase just use before Angular destroys the directive/component (On the destruction of a component, ngOnDestroy is invoked by the Angular).
Generating the hook methods
One thing that you should remember is the “hook” and “hook method” must have the 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 child component again we have to run
Here again, joins the parent After ViewInit.
Being a developer you must know how much importance the component holds in Angular, so knowing about these lifecycle hooks is equally very important. After reading this article, you have gained the knowledge about the hooks and what role they play in the lifecycle of an AngularJs Development. You should be cautious of using these hooks as all the hooks may not be needed for your project, so choose those which are necessary for you.
Are you preparing for Angular interviews ? Then no worries just watch the below video 👇!!!
