Lifecycle hooks of angular components are important events that occur within the lifecycle of a component or directive.
The lifetime of a component instance begins when Angular instantiates the component class and renders the component view and its child views. Change detection continues the lifecycle, with Angular checking to see whether data-bound attributes change and updating both the view and the component instance as needed.
When Angular kills the component instance and removes the displayed template from the DOM, the lifecycle is complete. In the course of execution, Angular creates, modifies, and destroys instances, thus directives have a similar lifetime.
In order to initialize new instances, begin change detection when appropriate, respond to updates during change detection, and clean up before deletion of instances, your application can utilize lifecycle hook methods to tap into important events in the lifetime of a component or directive.
Prerequisites
You should have a basic understanding of the following before dealing with lifecycle hooks:
Knowledge of TypeScript programming language.
Fundamentals of Angular app design, as explained in
Introduction of Angular
Angular Component Overview and Steps to Create a component
Taking action in response to lifecycle hooks of angular component
Implementing one or more of the lifecycle hook interfaces in the Angular core library allows you to respond to events in a component’s or directive’s lifecycle. As the Angular create, update or destroy a component or directive these lifecycle hooks helps to act on accordingly.
Each interface defines a single hook method prototype, whose name is the interface name preceded with ng. The OnInit interface, for example, provides a hook function called ngOnInit(). If you include this method in your component or directive class, Angular will call it shortly after the component or directive’s input properties are checked for the first time.
@Directive({selector: '[appTest]'})
export class TestDirective implements OnInit {
constructor(private logger: LoggerService) { }
// implement OnInit's `ngOnInit` method
ngOnInit() {
this.logIt(`OnInit`);
}
logIt(msg: string) {
this.logger.log(`#${nextId++} ${msg}`);
}
}You don’t have to implement all (or any) of the lifecycle hooks, just the ones you need.
The sequence of events in the lifecycle hooks of angular component
Angular calls the hook methods you’ve implemented at the appropriate moment in the lifecycle of a component or directive when your application instantiates it by invoking its constructor.
The following is the order in which Angular runs hook methods. These methods help to act on accordingly in response to the operations
ngOnChanges()
Purpose
When Angular sets or resets data-bound input properties, this method must respond. This method gets an object of current and previous values named as SimpleChanges
Because this occurs often, every operation you conduct here has a substantial influence on performance. This document’s Using change detection hooks section has further information.
Timing
If the component contains bound inputs, this function is called before ngOnInit() and anytime one or more data-bound input attributes change.
The framework will not call ngOnChanges() if your component has no inputs or if you utilize it without supplying any inputs.
ngOnInit()
Purpose
After Angular has shown the data-bound properties and configured the directive or component’s input properties, initialize the directive or component. In this document, see Initializing a component or directive for more information.
Timing
After the first ngOnChanges(), it is only called once. Even if ngOnChanges() is not called, ngOnInit() is invoked (which is the case when there are no template-bound inputs).
ngDoCheck()
Purpose
The changes which are undetectable by the angular itself detect and acted by this method.
Timing
Changes that AngularCalled immediately after ngOnChanges() on every change detection run, and immediately after ngOnInit() on the first run.
ngAfterContentInit()
Purpose
After Angular has projected external material into the component’s view, or the view that a directive is in, you should respond.
Timing
After the initial ngDoCheck() called once.
ngAfterContentChecked()
Purpose
After Angular has checked the content projected into the directive or component, it will respond.
Timimg
This method is called after ngAfterContentInit() and every subsequent ngDoCheck().
ngAfterViewInit()
Purpose
After Angular has initialized the component’s views and child views, or the view containing the directive, respond.
Timing
Called once after the first ngAfterContentChecked().
ngAfterViewChecked()
Purpose
After Angular checks, the component’s views and child views, or the view that includes the directive, It will respond.
Timing
Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked().
ngOnDestroy()
Purpose
Just before Angular kills the directive or component, do some cleanup. To avoid memory leaks, unsubscribe from Observables and remove event handlers.
Timing
This method is called just before when Angular removes the directive or component.
Conclution
Lifecycle hooks of angular components be can utilize to tap into important events in the lifetime of a component or directive. There are different type of events or hooks occurs in the lifetime of an angular component. These lifecycle hooks of angular components come into the action in a specific order.
| Previous Chapter: Angular Component Overview & Steps to Create a Component |