Lifecycle Hooks in Angular

Lifecycle of angular components Hooks are methods run at specific times throughout a component's lifecycle.

A set of functions in Angular called lifecycle hooks run at particular times throughout a component's lifecycle. These techniques let you run execute  logic or tasks at particular times during the Angular component lifetime.

 

The root component of lifecycle hooks in angular is created and rendered when the angular application starts. It then produces and renders its offspring as well as the offspring of its offspring . Angular components are arranged in kind of a tree. 

How Angular Works once the components are loaded - Angular starts to generate the view. Among other things, the projected content needs to be rendered, data bindings and expressions need to be evaluated, and the input attributes need to be verified.

As soon as a component is no longer needed, Angular removes it from the document object model (DOM).

In the Angular component life cycle, angular lifecycle hooks are nothing more than callback functions that Angular calls when a particular event happens.

 

Sequence of lifecycle Following the creation of a component or directive by invoking its constructor. Each interface contains a single hook method, designated by the interface name preceding the ng prefix. For example, Angular calls the ngOnInit() hook function from the OnInit interface shortly after the component's creation. 

Angular executes the lifecycle hook methods at predetermined times in the following order

@angular/core offers all lifecycle technique

• gOnChanges() This hook/method is invoked prior to ngOnInit and anytime one or more input properties of the component are modified. This method/hook accepts a SimpleChanges object that encompasses the prior and current values of the property.
• ngOnInit() This hook is invoked once, subsequent to the ngOnChanges hook. It initialises the component and configures its input attributes.
• ngDoCheck() is invoked after to ngOnChanges and ngOnInit, serving to identify and respond to alterations that Angular cannot detect. Our change detection approach can be implemented within this hook.
• ngAfterContentInit()  is invoked subsequent to the initial ngDoCheck hook. This hook activates subsequent to the content being rendered within the component.

 

• ngAfterContentChecked() is invoked subsequent to ngAfterContentInit and each ensuing ngDoCheck. It reacts subsequent to the verification of the anticipated material.
• ngAfterViewInit() It replies subsequent to the initialisation of a component's view or a child component's view.
• ngAfterViewChecked() It is invoked subsequent to ngAfterViewInit and responds after the verification of the component's view or the child component's view.
• ngOnDestroy() It is invoked immediately prior to Angular terminating the component. This hook can facilitate code refinement and the disconnection of event handlers.

 

d