Angular's lifecycle hooks are a unique feature that lets us "hook into" and execute code at a particular component or directive lifecycle event.

Angular applications go through a whole range of procedures or have a lifecycle from the moment they are created until they are terminated.

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

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.

The following will be covered in this article:

• The many lifecycle hooks for Angular directives and components
• How to run our code by hooking into component lifecycles
• What activates lifecycle hooks, and how are they called in sequence?

The following, in call sequence, are the hooks for components or directives:

1. constructor()
2. OnChanges
3. OnInit
4. DoCheck
5. OnDestroy

The hooks for a component's child components are as follows:

1. AfterContentInit
2. AfterContentChecked
3. AfterViewInit
4. AfterViewChecked

The table below provides a summary of the Angular lifecycle hooks:

OnChanges: Any time a data-bound property of an angular directive changes, this lifecycle hook is called. The Simple Changes object, which contains the current and historical data properties, is returned by this method. Because it continually triggers, make sure to restrict the quantity of processing.

@Component({
   selector: 'ng-app', template: `...`
})
class AppComponent implements OnChanges {
   ngOnChanges(changes: SimpleChanges) {
     // code goes here...
   }
}

OnInit: During component initialization, this Angular lifecycle hook is immediately called.

@Component({
   selector: 'ng-app', template: `...`
})
class AppComponent implements OnInit {
   ngOnInit() {
     // code goes here...
   }
}

DoCheck: In cases where Angular is unable to recognize the changes, this lifecycle hook is used in place of ngOnChanges.

@Component({
   selector: 'ng-app', template: `...`
})
class AppComponent implements DoCheck {
   ngDoCheck() {
     // code goes here...
   }
}

OnDestroy : It is an important lifecycle hook that stops memory leak in Angular. When the component is destroyed, it starts to work.

@Component({
   selector: 'ng-app', template: `...`
})
class AppComponent implements OnDestroy {
   ngOnDestroy() {
     // code goes here...
   }
}

AfterContentInit : After all of the content in a directive has been initialized by Angular, the callback function is initialized. And only one time, when the directive is called, is it called.

@Component({
   selector: 'ng-app', template: `...`
})
class AppComponent implements AfterContentInit {
   ngAfterContentInit() {
     // code goes here...
   }
}

AfterContentChecked - Immediately following the directive content check, this lifecycle procedure is invoked.

@Component({
   selector: 'ng-app', template: `...`
})
class AppComponent implements AfterContentChecked {
   ngAfterContentChecked() {
     // code goes here...
   }
}

AfterViewInit : The moment the component's view is created, this lifecycle method is called.

@Component({
   selector: 'ng-app', template: `...`
})
class AppComponent implements AfterViewInit {
   ngAfterViewInit() {
     // code goes here...
   }
}

AfterViewChecked : Following the component's content check, this lifecycle function is invoked.

@Component({
   selector: 'ng-app', template: `...`
})
class AppComponent implements AfterViewChecked {
   ngAfterViewChecked() {
     // code goes here...
   }
}

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 characterized by the component lifecycle. By offering the aforementioned hooks, Angular outlines its lifecycle.