Run function when an ionic 2 page has fully loaded

Question

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).

Solution 1

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

Solution 2

You can use the lifecycle callback ngAfterViewInit() of the component that is loaded last (depends on your routing).

Comments

[Bill Noble]

Thanks for that. I tried onPageLoaded but it runs when the index.html has loaded not when the somepage.html has loaded and that is what I need.

[Ryan Loggerythm]

Ionic2 is in beta. functions change. it's now called "ionViewLoaded()"

[Mister Verleg]

Thanks for linking to lifecycle events

[Armen Sanoyan]

Are there this kind of functions for components ?

[Armen Sanoyan]

Hi are there this kind of functions for components ? Or how can I call function after the component is loaded? Thanks!

[Günter Zöchbauer]

@ArmenSanoyan sorry, I don't understand your comment.

[Armen Sanoyan]

If I am not mistaken ngAfterViewInit() function get called after page is loaded but it doesn't work in components. So my question is are there functioins like ngAfterViewInit() which work in components too?

[Günter Zöchbauer]

ngAfterViewInit is a component lifecycle method and therefore especially for components.

[artberri]

Hi @ArmenSanoyan Those events do not exist on 'inner' components. You need to use Angular's lifecycle events (angular.io/guide/lifecycle-hooks) instead of ionic's, or use something like the @ViewChild decorator in order to manage the child behaviour from the parent (learnangular2.com/viewChild). But you know, theoretically each component should manage itself and shouldn't depend on parent. So, this @Viewchild thing is probably an anti-pattern. IF you can, I'll suggest you to use Angular's events. But of course, we need sometimes to take shortcuts :P