Lifecycle Hooks in Angular: A Complete Guide (2023)

AngularLifecycle hooks are a unique feature that allows us to "hook" and execute code on a specific component or policy lifecycle event.

When we add, modify, or remove components and directives, Angular maintains them for us. We can have more control over our program with the help of lifecycle hooks.

To achieve this, we add some specific hook methods to our component or directive that are prefixed with ng. Component or directive hooks and child component hooks are the two categories that these hooks fall into.

What are lifecycle hooks in Angular?

The root component of Angular's lifecycle hooks is built and rendered as soon as the application starts. It then produces and processes its offspring as well as its offspring. A tree is used to organize the components.

After loading the components, Angular starts creating the view. Among other things, input attributes must be validated, data bindings and expressions must be evaluated, and styled content must be produced. Once the component is no longer needed, Angular removes it from the document object model (DOM); Angular removes it from the document object model (DOM).

Angular's lifecycle hooks let us know when specific events occur.

Angular lifecycle hooks are callback functions that are called by Angular during the lifecycle of an Angular component.

Why do we need lifecycle hooks?

With the help of contemporary front-end frameworks, the application can change its state. Data drives change. These technologies wrap the data and, as a result, change state. There are numerous different cases where certain assets become accessible with each state transition.

The model can be prepared at one time, while the data load can be completed at another. A detection method is required when coding each instance. Lifecycle hooks provide an answer to this. Numerous lifecycle hooks are included in modern front-end frameworks.

How to use lifecycle hooks?

Comment out this element or guideline. binds to the lifecycle of a process Create a simple component that will be used to implement a method to bind to ngOnInit.

An Angular project can be established using the Angular CLI. Turn on the application component.

Lifecycle bindings for components or directives

The smallest building block units in a tree of angular components are called components. This makes it incredibly simple for us to build and manage our software.

Components are classes with@componentaspect.

@Component({selector:"application-comp",model:`<div>Hello world</div>`,styles:"})classroom Hello World implements OnInit{ //...}

Directives are the components, but they operate on the non-UI part of the DOM structure. Directives are classes decorated with a@Directiveclass decorator.

Examples of inline directives are*Parami* con.

Here are lifecycle hooks for components or directives.

Constructor()

It is used because our components or directives are JavaScript classes with a @Component or@Directive. Therefore, this constructor is called when a component is instantiated and used by thenuevokeyword.

OnChanges()

OenCambiosThe method is a lifecycle hook, called when any data-bound property of the policy changes.

Now let's take an exampleShoppinghas the input propertybicycle.

@Component({selector:'shopping',model:`<div *ngFor="leave the bike from the bikes">{{bicycle}}</div>`})export classroom Shopping implements OnChanges{@Forbidden()bicycle com OnChanges() {console.record("Ownership of the bike has changed")}}@Component({ // ...model:`<bcomp [bikes]="bike"></shopping>`})export classroom Application{ bicycles =["Harley Davidson","Davison"]}

onInit()

After Angular has initialized all the data-bound properties of a directive, a lifecycle hook calledOnInitis named. Create a function calledconOnInit()to handle other startup needs.

When the initial change detection of the component is performed, this hook is invoked. It is turned off after the initial run and will never be used again. We recommend including our initialization logic here.

we are going to implement theonInitinterface and add thecom OnInitmethod for the component.

@Component({//...Code samples})export classroom Hello World implements OnInit{com OnInit(){console.record("initialization is called")}}

in destroying

When a policy, channel, or service is destroyed, the lifecycle hookin destroyingis named. Use it for any special cleanup procedures that need to be performed when the instance is destroyed.

This hook is mainly used to unsubscribe from observable streams and turn off event handlers to prevent memory leaks.

Developer session replay

Uncover frustrations, understand bugs, and fix slowdowns like never before withopen repeat— an open source session playback suite for developers. Could beself-hostedin minutes, giving you full control over your customer data

Lifecycle hooks for child components

Components can have parent and child components because Angular is organized like a tree. Alternatively, what the component represents and what the component represents.

The hooks we'll learn about here are the hooks that will be called during specific events in the child component's lifecycle. Developers can add their custom code to the hooks declared in the main component to increase the functionality of their component.

Initializing the content of the child component, initializing and rendering the child component's UI or screen, or performing change detection for the child component triggers call hooks in the parent component.

AfterContentInit

When the content of a component or directive has been initialized,AfterContentInitis invoked. The elements or guidelines projected between the<of-content>mi</ng-content>the tags are called "content" in this case:

@Component({selector:'second component',model:`<div>This is a second component</div>`})export classroom Second Component{}@Component({selector:'first component',model:`<un-content></un-content>`})export classroom FirstComponent implements AfterContentInit{ ngAfterContentInit() { // ...}}@Component({model:`<first component><second component></second component></first component>`})export classroom Application{}

Anything between the FirstComponent tags<first component>mi</first component>inside the ng-content tag will be projected. The Second Component is now projected onto theaccompanylabel of the first component. EITHERngAfterContentInithook will be called on AComponent when SecondComponent is initialized.

AfterContentChecked

This hook is activated after completion of verification by the default change listener for the component or the directive designed in the component using theof contentqualification:

@Component({selector:'first component',model:`<un-content></un-content>`})export classroom FirstComponent implements AfterContentInit{ ngAfterContentInit() { // ...}}@Component({model:`<first component>{{data}}</first component>`})export classroom Application implements AfterContentChecked{ data: any ngAfterCONtentChecked() { //...}}

The application component has a data property that is inside the FirstComponent. When the data property changes,ngAfterContentCheckedwill be called

AfterViewInit

After a component's view and all of its child views have been fully generated and initialized, this hook is invoked.

This hook is useful when we want to usesee child/VerNiñosto access a component instance or directive in our component.

AfterViewChecked

The change detector of a child policy component/component is run for checks after calling this hook.

Be careful when setting any variables here that are bound to the template. You will get the error message "Expression was changed after being verified" if you try this.

@Component({selector:'first build', // ...})export classroom a component{@Forbidden()data firstCompMethod() { return to be.data* 9}}@Component({model:`<div>{{aCompData}}<firstcomp [datos]="dados" #firstcomp></firstcomp><button (click)="changeData()"></button></div>`})export classroom Application implements AfterViewChecked{@see child('first build')first composition: FirstComponent data: any firstcompData:any change data() { to be.data=Data.now()} ngAfterViewChecked() { //... to be.firstcompData= to be.primeracomp.firstCompMethod()}}

When we clickchange databutton, we change the data binding toof the first componentinput link for theof the first component firstCompMethodthe result is displayed infirstCompData.

A reference error may occur if the method is called from any other location, as Angular may not have finished running the cd on theFirstComponent. Because itngAfterViewInitmethod will be called afterof the first componentThe execution of the CD is complete, we implement theAfterViewCheckedinterface and added it.

Examples of Angular Lifecycle Hooks

Angular applications can exploit the lifetime of a component or directive using lifecycle hook methods to establish new instances, start change detection when necessary, respond to changes during change detection, and clean up before release. destruction of the instance.

Angular calls these hook methods in the following order:

-com OnChanges: When an input/output link value changes.-com OnInit: After the first ngOnChanges.-ngDoCheck: Detection of custom changes from the developer.-ngAfterContentInit: After initializing the content of the component.-ngAfterContentChecked: After checking the content of each component.-ngAfterViewInit: After initializing the views of a component.-ngAfterViewChecked: After each check of views of a component.-ngOnDestroy: Just before the component/directive is destroyed.

Each hook is being watched and logged in the console. There are separate fields for the message and the content. Both properties must be used as input, and the property to be cast as content is sent to the child component.

Ohidden childThe form option can add or remove the child component from the DOM. This uses theGIFdirective.

Use the directive to observe the DOM.

The snooping example shows how components and directives can be used using the hook technique. To identify an element that has been seen in the current view, SpyDirective implements two hooks: ngOnInit() and ngOnDestroy().

This template implements SpyDirective in a<div>in ngFor hero repeater managed by native SpyComponent.

This lookup directive can give you access to information about a DOM object that you can't edit directly. You can't change any third-party components or the implementation of the original div. However, using a directive, you can view these components.

The directive defines the ngOnInit() and ngOnDestroy() hooks, which use the injected LoggerService to log messages to the parent.

The instance does not perform any initialization or cleanup. By recording instructions as they are instantiated and destroyed, it tracks the appearance and removal of an element in the scene.

origen/application/spy.directive.tscontent_copylet nextId= 1; // Spy on any element it's applied to.// Uso: <div appSpy>...</div>@directive({selector:'[spy app]'})export classroom SpyDirectiva implements OnInit,in destroying{ private I was going =next id++;  constructor(private recorder: RegistrarService) { }  com OnInit() { to berecorderrecord(`Spy #${to be.I was going} onInit`);}  ngOnDestroy() { to berecorderrecord(`Spy #${to be.I was going} onDestroy`);}}

Any parent element or component can be given eavesdropping commands to simultaneously watch itself initialize and destroy as that element. It is connected with the repetitive hero.<div>In this case:

src/app/spy.component.html

<pag *the Garbage= "that the hero of heroes" spy app> {{hero}} </pag>

With a log entry, each spy creation and demolition hook denotes the arrival and demise of an attached hero.<div>. a new hero<div>is created when a hero is added and ngOnInit() logs this event to the spy.

Clear the hero list using the reset button. Angular simultaneously removes all heroes<div>spy on directives on elements and remove them from the DOM. The spy's ngOnDestroy() method records its final moments.

Sequence and frequency of all life cycle events

PeekABooComponentexposes each hook in a component to demonstrate how Angular calls hooks in the expected sequence.

The registration status is shown in the following screenshot after clicking the Create and Destroy buttons.

Following the specified hook call order, the log messages appear in the following order: onchange, oninit, doCheck (3 times), afterContentInit, afterContentChecked (3 times), afterViewInit, afterViewChecked (3 times), and onDestroy.

It should be noted that the registry checks that the input property (the name property) was not created with a specified value. The onInit() method has access to input properties for further initialization.

The log would show another hero as soon as the user hits the Update Hero button.

OnChange, AfterContentCheck and AfterViewCheck are two more triples of DoCheck. It's vital to keep the reasoning for these three hooks as simple as possible, because they often work.

Use component hooks and directives together

In this illustration, a CounterComponent registers a change each time the parent component increments the value of its InputCount property using the methodwithOnChange()method.

This example uses SpyDirective to examine the generation and deletion of registry entries in the CounterComponent registry from the previous example.

Using change detection hooks

Whenever it notices a change to the input properties, Angular runs thewithOnChange()component function or directive. This is shown by looking at theInstead()hook in the onchange example.

about-changes.component.t(extract)content_copyngOnChanges(changes: SimpleChanges) { for(constant propName theychanges) { constant feliz =changes[propName]; constant scoundrel = JSON.restrict(value.change); constant anterior = JSON.restrict(change.previous value); to be.changeLog.to push(`${propName}: currentvalue = ${scoundrel}, oldvalue = ${anterior}`);}}

The object that maps each changed property name to a simple change object containing the current and previous property values ​​is passed to thewithOnChange()method. This hook records the modified properties after iterating over them.

hero and power.src/app/on-changes.component.tsare the input properties of the sample OnChangesComponent component.

content_copy@Input() hero!: Hero;@Input() power = '';The OnChangesParentComponent host binds to them as follows.src/app/on-changes-parent.component.htmlcontent_copy<on-changes [hero]="hero" [power]="power"></on-changes>

Here is the sample example below.

The string value of the power property change is displayed in the registry entries. But remember that thewithOnChange()The method loses upgrades to the hero. This is because Angular only triggers the hook when the value of the input property changes.

In this case, a hero is the input property, and a reference to the hero object is the value of the hero property. When the value of the name property changed, the object reference did not change.

Conclusion

Remember that each hook has requirements that must be met. Regardless, they will always perform their actions one after another. As a result, the hooks are predictable enough to use even when some don't work.

Synchronizing the execution of a class is simple with lifecycle hooks. They allow developers to monitor the location of change detection and the appropriate responses to the application. Code that needs load-based dependencies to become available only causes them to grind to a halt.

Modern front-end frameworks are characterized by the component lifecycle. By offering the aforementioned hooks, Angular describes their lifecycle.

A TIP FROM THE EDITOR: Need help deciding which framework to use? ReadAngular, React, Vue: a three-way comparisonto help with this decision!