Ionic 2 is loading the stale component

This is my footer component. I am calling few pages from the footer bar as follows. When i click on the footer, it is loading the stale component. i debugged it and found out it is not calling the constructor of the component (where i have the loading logic to refresh the data). i have to click twice from the footer to call the component to get the correct data


    <ion-tab [root]="home" tabIcon="md-home" 
     <ion-tab [root]="alertsPage" tabIcon="md-notifications-outline">
   <ion-tab [root]="flagged" tabIcon="flag"></ion-tab>

   selector: 'app-tab-footer',
   templateUrl: './tab-footer.component.html',
  styleUrls: ['./tab-footer.component.scss']
  export class TabFooterComponent {

  home = HomeComponent;
  alertsPage = AlertsComponent;
  flagged = FlaggedComponent;
  homeparams: any;

  constructor(public navparam: NavParams) {
    this.homeparams = navparam;


Here is my one of the components that is called from footer

 selector: 'app-flagged',
 templateUrl: './flagged.component.html',
  styleUrls: ['./flagged.component.scss']
export class FlaggedComponent {

    someData1: any;
    someData:any[] = [];

    someObj = {}

 constructor(public someService: SomeServiceService,
     public exampleService: ExampleService,
     public navParams: NavParams,
     public navCtrl: NavController) {

   // some loading logic

Can anyone help finding out why it is not calling constructor every time? Do I have specify some property to load it fresh? Thank you

1 answer

  • answered 2017-12-06 17:18 mediaupstream

    Add the lifecycle event ionViewDidEnter or ionViewWillEnter to your FlaggedComponent class and move your update or loading logic from the constructor into one of those methods.

    ionViewDidEnter() {
      console.log('the page has entered');
    ionViewWillEnter() {
      console.log('the page is about to enter');

    ionViewDidEnter is called when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page.

    ionViewWillEnter is called when the page is about to enter and become the active page.