# Lifecycle Hooks in Angular - A Complete Guide

## Introduction
[Angular](https://angular.io/) lifecycle hooks are a unique feature that let us "hook into" and execute code at a particular component or directive lifecycle event.

When it adds, modifies, or deletes components and directives, Angular maintains them for us. We may have more control over our programme with the help of lifecycle hooks.

To achieve this, we add a few certain hook methods to our component or directive that are prefixed with ng. Hooks for components or directives and hooks for child components are the two categories into which these hooks fall.

## What are Lifecycle Hooks in Angular?
Angular's lifecycle hooks' root component is built and rendered as soon as the application is launched. Then it produces and renders its progeny as well as their progeny. A tree is used to organise the components.

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

Lifecycle hooks from Angular let us know when specific events take place.

Angular lifecycle hooks are merely callback functions that Angular calls during an Angular component's lifecycle.

## Why do We need Lifecycle Hooks?
With the help of contemporary front-end frameworks, the application can change states. The modifications are driven by data. These technologies engage the data, changing the state as a result. There are numerous distinct instances when particular assets become accessible with every state transition.

The template might be prepared at one time, while the uploading of the data may be complete at another. A method of detection is needed while coding for every instance. Lifecycle hooks provide an answer for this. Numerous lifecycle hooks are included in modern front-end frameworks. 

## How to Use Lifecycle Hooks


Comment on this element or directive. hooks into a process's lifecycle
Create a straightforward component that will be used to implement a method to connect to ngOnInit.

An Angular project can be established using the Angular CLI. Turn on the app's component.

## Lifecycle Hooks for Component or Directives
The smallest units of a component tree's building blocks in Angular are called components. This makes it incredibly simple for us to create and manage our software.

Components are the classes with `@component`looks like.

@Component({
  selector: "app-comp",
  template: `<div>Hello World</div>`,
  styles: ``
})

class HelloWorld implements OnInit {
  //...
}

Directives are the components, but it operates on the non-UI part of the DOM structure. Directives are the classes, and are decorated with `@Directive` class decorator.

The examples of in-built directives are `*ngFor`, `*ngIf`.

Here, are the lifecycle of hooks for components or directives.

## `Constructor()`

It is used because our components or directives are the JavaScript classes with either an @Component or `@Directive`. So this constructor is called when our component are instantiated and used by `new` keyword.

## `OnChanges()`
`onChanges` method is a lifecycle hooks in angular and it is called when any data-bound property of directive changes.

Now, let's take an example `Shopping` has the input property `bike`

@Component({
 selector: 'shopping',
 template: `
 <div *ngFor="let bike of bikes">
 {{bike}}
 </div>
 `
})
export class Shopping implements OnChanges {
 @Input() bike
 ngOnChanges() {
 console.log("The bike property changed")
 }
}
@Component({
 // ...
 template: `
 <bcomp [bikes]="bike"></shopping>
 `
})
export class App {
 bikes = ["Harley Davidson","Davidson"]
}

## `OnInit()`

After Angular has initialised all data-bound properties of a directive, a lifecycle hook called `OnInit` is called. Create a function called `ngOnInit()` to handle any further initialization needs.

When the component's initial change detection is performed, this hook is invoked. It is turned off after the initial run and will never be used again. It's recommended to include our initialization logic here.

We will implment `onInit` interface and add `ngOnInit` method in the component.

@Component({
//...Code examples
})

export class HelloWorld implements OnInit{
ngOnInit(){
   console.log("Initialization is called")
 }
}

## `OnDestroy`

When a directive, pipe, or service is destroyed, the lifecycle hook `OnDestroy` is called. Use this for any special cleanup procedures that must be carried out when the instance is destroyed.

In order to prevent memory leaks, this hook is mostly used to unsubscribe from our observable streams and disconnect event handlers.

## Lifecycle Hooks for Children Components
Components can have both parent and child components because Angular is organised like a tree. Alternatively put, what the component renders and what the component renders.

The hooks we'll be learning about here are the hooks that will be invoked during particular child component lifecycle events. Developers can add their own custom code to the hooks that are declared in the parent component to increase the functionality of their component.

The initialization of the child component's content, the initialization and rendering of the child component's UI or view, or the execution of the child component's change detection all trigger the calling of hooks in the parent component.

## `AfterContentInit`

When the content of a component or directive has initialised, `AfterContentInit` is invoked. The elements or directives projected in-between the `<ng-content>` and `</ng-content>` tags are referred to as "content" in this instance:

@Component({
 selector: 'secondcomponent',
 template: `
 <div>This is a second Component</div>
 `
})
export class SecondComponent {}
@Component({
 selector: 'firstcomponent',
 template: `
 <ng-content></ng-content>
 `
})
export class FirstComponent implements AfterContentInit {
 ngAfterContentInit() {
 // ...
 }
}
@Component({
 template: `
 <firstcomponent>
 <secondcomponent></secondocomponent>
 </firstcomponent>
 `
})
export class App {}

Any elements between the FirstComponent's tags `<firstcomponent>` and `</firstcomponent>` inside the ng-content tag will be projected. The Second Component is now projected in the acomp tag of the First component. The `ngAfterContentInit` hook will be called in the AComponent when the SecondComponent is initialised.

## `AfterContentChecked`

This hook is activated following the completion of the check by the default change detector for the component or directive projected into the component using the `ng-content` tag:

@Component({
 selector: 'firstcomponent',
 template: `
 <ng-content></ng-content>
 `
})
export class FirstComponent implements AfterContentInit {
 ngAfterContentInit() {
 // ...
 }
}
@Component({
 template: `
 <firstcomponent>
 {{data}}
 </firstcomponent>
 `
})
export class App implements AfterContentChecked {
 data: any
 ngAfterCOntentChecked() {
 //...
 }
}

The App component has a data property that is inside the FirstComponent. When the data property changes, the `ngAfterContentChecked` method will be called.

## `AfterViewInit`

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

This hook is useful when we wish to use `ViewChild`/`ViewChildren` to access a component or directive instance in our component.

## `AfterViewChecked`

The change detector of a component/child directive's component is performed for checks after this hook is called.

Watch out for setting any variables here that are tied to the template. You will get the error message "Expression has changed after it was checked" if you try this.

@Component({
 selector: 'firstcomp',
 // ...
})
export class AComponent {
 @Input() data
 firstCompMethod() {
 return this.data * 9
 }
}
@Component({
 template: `
 <div>
 {{aCompData}}
 <firstcomp [data]="data" #firstcomp></firstcomp>
 <button (click)="changeData()"></button>
 </div>
 `
})
export class App implements AfterViewChecked {
 @ViewChild('firstcomp') firstcomp: FirstComponent
 data: any
 firstcompData:any
 changeData() {
 this.data = Date.now()
 }
 ngAfterViewChecked() {
 //...
 this.firstcompData = this.firstcomp.firstCompMethod()
 }
}

When we click the changeData button, we change the data binding for `FirstComponent's` input binding such that `FirstComponent's` `firstCompMethod` result is displayed in the `firstCompData`.

A reference error could occur if the method is called from any other location since Angular might not have finished running CD on the `FirstComponent`. Because the `ngAfterViewInit` method will be called after the `FirstComponent's` CD run is complete, we implemented the `AfterViewChecked` interface and added it.

## Angular Lifecycle Hooks Examples

The lifespan of a component or directive can be tapped into by Angular applications using lifecycle hook methods to establish new instances, start change detection when necessary, respond to changes during change detection, and clean up before instance destruction.

Angular calls these hook methods in the following order:

`ngOnChanges`: When an input/output binding value changes.
`ngOnInit`: After the first ngOnChanges.
`ngDoCheck`: Developer's custom change detection.
`ngAfterContentInit`: After component content initialized.
`ngAfterContentChecked`: After every check of component content.
`ngAfterViewInit`: After a component's views are initialized.
`ngAfterViewChecked`: After every check of a component's views.
`ngOnDestroy`: Just before the component/directive is destroyed.

Here is the lifecycle of Hooks example.

ChangeDetectionStrategy, Component, and Version are all imported from "@angular/core."@Component({My app selectorchangeDetection:ChangeDetectionStrategy.

This is the root of lifecycle component.

In other words, in other words, in other words.

<input type="text" name="message"[(ngModel)]="message" autocomplete="off"/>To put it another way, br />
<input type="text" name="content"[(ngModel)]="content" autocomplete="off"/> 

This function is called when the view is invoked.

`console.log("AppComponent:AfterViewInit");}ngAfterViewChecked( )'sconsole.log("AppComponent:AfterViewChecked");}onDestroy() of a nodeconsole.log("AppComponent:ngOnDestroy");}} `

Every hook is being watched over and recorded to the console. There are distinct fields for the message and content. Both properties to be utilised as input and a property to be projected as content are sent to the kid component.

The hideChild form option can be used to add or delete the ChildComponent from the DOM. This uses the `ngIf` directive.

### Use the Directive to watch the DOM.
The spy example shows how components and directives may both be used using the hook technique. To identify an element that has been viewed in the current view, SpyDirective implements two hooks: ngOnInit() and ngOnDestroy().

This template implements SpyDirective on a `<div>` in the native SpyComponent-managed ngFor hero repeater.

Such a spy directive can provide you access to information about a DOM object that you cannot directly edit. You are not permitted to alter any third-party components or the original div's implementation. However, using a directive, you may see these components.

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

There is no initialization or cleanup carried out by the instance. By recording the instructions when they are instantiated and destroyed, it keeps track of an element's appearance and removal in the scene.

src/app/spy.directive.ts  
content_copylet nextId = 1;  
  
// Spy on any element to which it is applied.  
// Usage: <div appSpy>...</div>  
@Directive({selector: '[appSpy]'})  
export class SpyDirective implements OnInit, OnDestroy {  
  private id = nextId++;  
  
  constructor(private logger: LoggerService) { }  
  
  ngOnInit() {  
    this.logger.log(`Spy #${this.id} onInit`);  
  }  
  
  ngOnDestroy() {  
    this.logger.log(`Spy #${this.id} onDestroy`);  
  }  
}  

Any parent or component element can be given the spy command to observe how it is initialised and destroyed as that element at the same time. It is connected to the repeating hero `<div>` in this instance:

src/app/spy.component.html

<p *ngFor="let hero of heroes" appSpy>  
  {{hero}}  
</p>  

With an entry in the log, each spy creation and demolition hook denotes the arrival and disappearance of an attached hero `<div>`. A new hero `<div> `is created when a hero is added. That event is logged by ngOnInit() on the spy.

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

### Sequence and frequency of all lifecycle events

PeekABooComponent exposes every hook in a component to demonstrate how Angular invokes hooks in the expected sequence.

The status of the log is shown in the following screenshot following the clicks of the Create and Destroy buttons.


Following the specified hook calling 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 log verifies that the input property (the name property) was not created with a specified value. The onInit() method has access to input properties for additional initialization.

The log would display another hero once the user hit the Update Hero button.

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

### Use component and directive hooks together

In this illustration, a CounterComponent logs a change every time the parent component increases the value of its InputCount property using the `ngOnChanges()` method.

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

#### Using the Change detection hooks
Whenever it notices a change in the input properties, Angular executes the `ngOnChanges()` function of the component or directive. This is shown by watching the `onchange()` hook in the onchange example.

on-changes.component.ts (excerpt)  
content_copyngOnChanges(changes: SimpleChanges) {  
  for (const propName in changes) {  
    const chng = changes[propName];  
    const cur  = JSON.stringify(chng.currentValue);  
    const prev = JSON.stringify(chng.previousValue);  
    this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);  
  }  
}  

The object that maps each changed property name to a straightforward change object holding the current and previous property values is passed to the `ngOnChanges()` method. This hook records the modified properties after iterating over them.

Hero and power`.src/app/on-changes.component.ts` are the input properties of the example component OnChangesComponent.

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

Here, is the sample exmaple below.

The string value of the power property change is displayed in the log entries. But keep in mind that the `ngOnChanges()` method misses updates to the hero. The reason for this is because Angular only fires the hook when the value of the input property changes.

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

## Conclusion
Keep in mind that each hook has requirements that must be satisfied. Regardless, they will always carry out their actions one after the other. As a result, hooks are predictable enough to be used even when some of them do not work.

Timing the execution of a class is simple with lifecycle hooks. They enable developers to monitor the location of change detection and the appropriate responses for the application. Code that needs load-based dependencies that become available only gradually causes them to stall.

Modern front end frameworks are characterised by the component lifecycle. By offering the aforementioned hooks, Angular outlines its lifecycle.