#componentlifecycle

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: - constructor() - OnChanges - OnInit - DoCheck - OnDestroy The hooks for a component's child components are as follows: - AfterContentInit - AfterContentChecked - AfterViewInit - 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