Ionic page lifecycle in details

In this tutorial, we’ll cover how the ionic page lifecycle works in an ionic angular application. The angular route which 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 page lifecycle

Ionic pages because of the caching mechanism, we 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 fired when the component routing from is about to animate or when the page will leave but still in stack.

5. ionViewDidLeave: Will 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 5 page life cycle

We will check the working of the ionic angular page 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 in 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 in 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');
  }

}

You can read more on the ionic component life cycle, please check the official ionic document.


Leave a Comment

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

Scroll to Top