Angular 2 (Ionic 2) call a function in a page when ever page is displayed

Question

When ever my home page in angular 2(ionic 2) app is loaded I want call service/function. How to achieve this?

For the first time when the app is loaded(home page is loaded) I can write this in the constructor, but when user start using the app and push new pages into nav controller and pop them to come back to home page, the constructor wont get called again.

I am stuck here.

I would like to know what is the best way to achieve this feature?

I am new to angular2 and ionic2 framework (also don't have experiences in angular1 and ionic1), please help me out.

Many Many Thanks.

update

sample code of what I tried, but didn't worked.

import {Page, NavController, Platform, Storage, SqlStorage} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
    static get parameters(){
        return [[NavController],[Platform]];
    }
    ngOnInit() {
        console.log("Showing the first page!");
    }
    constructor(nav, platform){
        this.nav = nav;
        this.platform =  platform;
    }
}

Solution 1

onPageWillEnter() worked for me.

import {Page, NavController, Platform, Storage, SqlStorage} from 'ionic-angular';


@Page({
  templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
    static get parameters(){
        return [[NavController],[Platform]];
    }
    onPageWillEnter() {
        console.log("Showing the first page!");
    }
    constructor(nav, platform){
        this.nav = nav;
        this.platform =  platform;
    }
}

Ionic lifecycle hook

Solution 2

IONIC 2 RC1 Update

ionViewWillEnter() {
    console.log("this function will be called every time you enter the view");
}

Solution 3

You can leverage the lifeCycle-hooks, specifically ngOnInit() or ngAfterViewInit().

Here is a simple tutorial.

For Example:

// Annotation section
@Component({
  selector: 'street-map',
  template: '<map-window></map-window><map-controls></map-controls>',
})
// Component controller
class StreetMap {
  ngOnInit() {  //here you can call the function wanted
    // Properties are resolved and things like
    // this.mapWindow and this.mapControls
    // had a chance to resolve from the
    // two child components <map-window> and <map-controls>
  }
}

Update: it works for pure Angular2 applications, for IonicFramework specific solution see

@DeepakChandranP's answer.

Comments

[Dipak]

I tried this, and seen in the tutorial also, but seems to be this function ngOnInit() is not getting called. - updated my question with code.

[Dipak]

I think I have to use onPageLoaded() in my case. Let me try and come back.

[Dipak]

Yes, its onPageWillEnter()

[Ankit Singh]

Nice to know. But it looks like it's not part of Angular, probably Ionic's own implementation.