SoFunction
Updated on 2025-04-12

A brief discussion on the understanding of life cycle hooks in Angular

This article introduces the understanding of the life cycle hook in Angular and shares it with you. I hope it will be helpful to you.

What is a life cycle hook

Simply put, the life cycle hook is a component in Angular that is created from some meaningful critical moments during destruction. These critical moments are exposed in Angular by the Angular core module @angular/core, giving us the ability to act when they occur.

What life cycle hooks are there

There are eight life cycle hooks in Angular from the creation of a component to the destruction of a component, in order of sequence. They are:

  1. ngOnChanges()
  2. ngOnInit()
  3. ngDoCheck()
  4. ngAfterContentInit()
  5. ngAfterContentChecked()
  6. ngAfterViewInit()
  7. ngAfterViewChecked()
  8. ngOnDestroy()

Among them: ngOnInit() , ngAfterContentInit() , ngAfterViewInit() , and ngOnDestroy() will only be called once in the life cycle of a component, and others may be called multiple times. Let's explain these life cycle hooks in detail.

ngOnChanges()

  • Respond when Angular (re)sets the data binding input property. This method accepts the SimpleChanges object of the current and previous attribute values
  • Called when the value of the bound input property changes, the first call must occur before ngOnInit().

The call to the ngOnChanges() lifecycle is related to the input properties in a component.

When an input property is defined using @Input() in a component, the ngOnChanges() life cycle hook will be triggered as long as the value of the input property changes. When this life cycle hook is called, a SimpleChanges object is passed in, which contains the current value and the previous value of the input property.

@Input()
public name: string;

ngOnChanges(changes: SimpleChanges): void {
 (changes); // name:SimpleChange {previousValue: "a", currentValue: "ab", firstChange: false}
}

Above is the print result after I defined an input property name and changed it from a to ab . Maybe you also noticed that there is a firstChange property in the printed result. It is a Booleans indicating whether it is your first change.

At the same time, there is another thing to note: your input attribute is defined as your reference type and the basic type, and its performance results are different. When your input attribute is a basic type, each change will trigger the ngOnChanges() lifecycle hook, and when your input attribute is a reference type, the ngOnChanges() lifecycle hook will not be triggered when you change the attributes in your reference type. The ngOnChanges() lifecycle hook will only be triggered when you point the pointer of your reference type data to another memory address.

ngOnInit()

  • Initialize the instruction/component after Angular first displays the input properties of the data binding and sets the instruction/component.
  • Called after the first round of ngOnChanges() is completed, only once.

ngOnInit() is a hook that must exist in the life cycle of a component. It is called when a component is initialized. During this period, you can perform some corresponding data binding operations.

ngDoCheck()

  • Detect and react when changes occur that Angular cannot or is unwilling to detect on its own.
  • After calling ngOnChanges() and ngOnInit() in each Angular change detection cycle.

ngDoCheck() is a change detection mechanism in Angular. It is implemented by . Its behavior is that as long as an asynchronous event occurs in a component in your Angular, the entire component tree will be checked to ensure that changes in component properties or page changes are synchronous. Therefore, ngDoCheck() is triggered quite frequently. It is something we cannot expect. Perhaps an unconscious operation on the page will trigger several or even dozens of ngDoCheck() lifecycle hooks.

So when we use the ngDoCheck() life cycle hook, we must add judgments to avoid useless triggers interfering with us.

ngAfterContentInit()

  • Called after projecting the content into the component.
  • It is called after the first time ngDoCheck(), and only once.
  • Applicable to components only.

When the parent component projects content to the child component, the projected content of the parent component will be initialized within the child component, and the ngAfterContentInit() lifecycle hook will be called. The ngAfterContentInit() lifecycle hook will only be called once during the entire component lifecycle. As shown below:

// Parent component<app-child>
 <p>I am the projection content of the parent component to the child component</>
</app-child>


// ChildComponent<div>
 //Accept the projection content of the parent component <ng-content></ng-content>
</div>

ngAfterContentChecked()

  • Called after each completion of change detection of the projected component content.
  • ngAfterContentInit() and call after each ngDoCheck()
  • Suitable for components only.

When the projected content of the parent component changes to the child component, the ngAfterContentChecked() life cycle hook is called. It is similar to ngDoCheck(). When the projected content changes, the change check mechanism is performed. The ngAfterContentChecked() life cycle hook is also called. In addition, there is another point: when both the parent component and the child component have projected content, the parent component's life cycle hook will be executed first. It is contrary to the ngAfterViewInit() and ngAfterViewChecked() mentioned below.

ngAfterViewInit()

  • Called after initializing the component view and its subviews.
  • Called after the first time after ngAfterContentChecked(), only once.
  • Suitable for components only.

When its component itself and all child components are rendered and have been rendered on the page, the ngAfterViewInit() lifecycle hook is called. The ngAfterViewInit() lifecycle hook will only be called once throughout the component lifecycle.

ngAfterViewChecked()

  • Called after each change detection of component view and subview.
  • ngAfterViewInit() and call after each ngAfterContentChecked().
  • Suitable for components only.

When the view of the component and its child components change, it is called after the change check mechanism is executed. When the view of both the parent component and the child component change, the life cycle hook of the child component will be executed first.

Note: The change of the view mentioned here is not necessarily a change on the page. It is just an Angular type of view change. Because Angular itself cannot detect the view displayed on the page. Therefore, in Angular, as long as the properties defined in the background change, the view has changed. Therefore, the ngAfterViewChecked() life cycle hook will be called.

ngOnDestroy

  • When Angular destroys the directive/component each time and cleans up. Desubscribe here to observable objects and detachable event handlers in case of memory leaks.
  • Called before Angular destroys the directive/component.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.