Site Overlay

Lifecycle hooks of angular components

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

Leave a Reply

Your email address will not be published. Required fields are marked *