Bill Noble Bill Noble - 21 days ago 13
iOS Question

Run function when an ionic 2 page has fully loaded

Is there a way to determine when an ionic 2 page has fully loaded? I need to insert some html into the page when all of the page html has been loaded. Ideally I would like to have a function in my @page class that runs when the page has been loaded.

At the moment I am inserting an iframe containing a vine into a div container. I am experiencing, when running the app on an iPhone 5 running iOS 9, some peculiar behaviour where the same vine sometimes sizes to the container and sometimes doesn't. I am guessing that this might be due to timing (the source for the vine iframe is received as part of an http request).

Answer

You can use the ionViewDidLoad method:

@Page({
  templateUrl: 'build/pages/somepage/somepage.html'
})
export class SomePage {
  constructor() {
    // ...
  }

  ionViewDidLoad() {
    // Put here the code you want to execute
  }
}

The lifecycle events as November 18, 2016 are:

  • ionViewDidLoad
  • ionViewWillEnter
  • ionViewDidEnter
  • ionViewWillLeave
  • ionViewDidLeave
  • ionViewWillUnload
  • ionViewCanEnter

Since Ionic 2 is in active development, things change all the time. If you would like to check the current lifecycle events, please refer to: https://ionicframework.com/docs/v2/api/navigation/NavController/#lifecycle-events