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:

OnChangesThis method is invoked whenever the value of a data-bound property changes.
OnInitThis is called each time the directive or component is initialized after Angular has shown the data-bound properties.
DoCheckThis is to detect changes that Angular can't or won't notice on its own and to take appropriate action.
OnDestroyJust before Angular kills the directive or component, this is the cleanup stage.
AfterContentInitAfter Angular projects external material into the component's view, this is invoked in response.
AfterContentCheckedAfter Angular has examined the content projected into the component, this is called as a response.
AfterViewInitAfter Angular initializes the component's views and child views, this is invoked in response.
AfterViewCheckedAfter Angular has checked the component's views and child views, this is invoked in response.
Table - Angular Component 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.


Recommended Posts

View All

Angular 13 NgModule Tutorial with Example


NgModule is an Angular decorator that organises your single-page Angular application's services, pipelines, directives, and components.

How to Create Custom Pipe in Angular 13 Application


We'll learn about ready-made and bespoke pipelines in this course. In addition, I'll show you how to make a custom pipe in Angular.

Angular 13 Firebase - Create a user with an Email address and Password


We'll show you how to use the Firebase database to create a user with an email and password in the Angular 13 frontend framework.

Full Angular 13 Firebase Authentication Tutorial Example


We'll show you how to create an Angular Firebase authentication system from the ground up with the Firebase Real-time NoSQL cloud database.

What is the difference between component and directive in Angular?


Learn the difference between Angular's components and directives. Discover their unique features and how to use them to build powerful web application...