Ionic lifecycle hooks of components in detail

In this tutorial, we’ll learn, what are Ionic lifecycle hooks of components in an ionic angular application are and when to use these hooks. The angular route is indirectly controlled by Ionic. The ionic embraces the two most common events of the angular life cycle apart from the ionic own page life cycle.
1. ngOnInit
2. ngOnDestory

Ionic pages because of the caching mechanism, have different life cycle methods than angular. In these articles, we will learn how the ionic angular page life cycle works.

1. ngOnInit: Fired once during component initialization and in ionic it will not call if the page which we are navigating is on the stack.

2. ionViewWillEnter: – It will be run after ngOnInit and it will basically execute right before the content of the page has been loaded or fired when the component routing to is about to animate into view.

3. ionViewDidEnter:- will run after ionViewwillEnter or fired when the component routing to has finished animating.

Both ionViewWillEnter and ionViewDidEnter are called whenever a page becomes visible. It is important because with caching or stack controller if a page is still in the on the stack and we’ll not be seeing it because another page is on top of on that stack of pages.

The page will actually never be destroyed, so ngOnDestory will never be called and ngOnInit will also never be called when you go back to that page which is still on the stack of pages.

4. ionViewWillLeave: Will fire when the component routing from is about to animate or when the page will leave but still in stack.

5. ionViewDidLeave: Will be fired when the component routing to has finished animating. or fired after the page was left but the page is still in the stack. In ionViewWillLeave and ionViewDidLeave are called whenever the page becomes invisible or whenever a new page is on top of the stack.

6. ngOnDestory: fired when the component is no longer on the stack.

Ionic lifecycle hooks example

We will check the working of the ionic angular component life cycle by creating an ionic project with 2 more pages.

>> ionic start pageLifeCycle blank --type=angular
>> ionic generate page page-1
>> ionic generate page page-2

Step 1: Add the following code to the home.page.html and home.page.ts file

<ion-header>
  <ion-toolbar>
    <ion-title>
      Home page
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <ion-card>
      <ion-card-content>
        <ion-button size="small" [routerLink]="'/page-1'" routerDirection="forward">Page 1</ion-button>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit, OnDestroy {

  constructor() {}

  ngOnInit() {
    console.log('ngOnInit - Home Page');
  }

  ionViewWillEnter() {
    console.log('ionViewWillEnter - Home Page');
  }

  ionViewDidEnter() {
    console.log('ionViewDidEnter - Home Page');
  }

  ionViewWillLeave (){
    console.log('ionViewWillLeave - Home Page');
  }

  ionViewDidLeave() {
    console.log('ionViewWDidLeave - Home Page');
  }

  ngOnDestroy() {
    console.log('ngOnDestory - Home Page');
  }

}

Step 2: Add the following code to page1.page.html and page1.page.ts file

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Page 1</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <ion-card>
      <ion-card-content>
        <ion-button size="small" [routerLink]="'/home'" routerDirection="forward">Home Page</ion-button>
        <ion-button size="small" [routerLink]="'/page-2'" routerDirection="forward">Page 2</ion-button>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-child-page',
  templateUrl: './child-page.page.html',
  styleUrls: ['./child-page.page.scss'],
})
export class Page1Page implements OnInit, OnDestroy  {

  constructor() { }

  ngOnInit() {
    console.log('ngOnInit - Page 1');
  }

  ionViewWillEnter() {
    console.log('ionViewWillEnter - Page 1');
  }

  ionViewDidEnter() {
    console.log('ionViewDidEnter - Page 1');
  }

  ionViewWillLeave (){
    console.log('ionViewWillLeave - Page 1');
  }

  ionViewDidLeave() {
    console.log('ionViewWDidLeave - Page 1');
  }

  ngOnDestroy() {
    console.log('ngOnDestory - Page 1');
  }

}

Conclusion
In this article, we have different Ionic lifecycle hooks of components and demonstrate an example of each hook and when to use it.

Related posts

• How to implement an ionic slider
• Complete guide on an ionic grid with an example
• How to implement an ionic alert controller.
• How to implement an ionic table with pagination.
• How to use ionic skeleton component.
• How to implement ionic firebase authentication?