Call a function every time a page is visited - Ionic 2

Question

I am new to Ionic 2 and implementing a small app where I want to call a REST API function whenever I revisit a page. Following a small piece of code that I have implemented.

import { Component } from '@angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';
import { ItemService } from '../../providers/item-service';
import { ItemDetailsCartPage } from '../item-details-cart/item-details-cart'

@Component({
  selector: 'page-cart',
  templateUrl: 'cart.html',
  providers: [ItemService]
})
export class CartPage {

  email;
  sessionId;
  public cartData: any;
  public message: any = [];

  constructor(public navCtrl: NavController, 
      public navParams: NavParams, 
      public itemSrvc: ItemService,
      public viewCtrl: ViewController) {}

  ionViewDidLoad() {
    this.email = this.navParams.get('email');
    this.sessionId = this.navParams.get('sessionId');;
    this.loadCart();
  }


  loadCart() {
    this.itemSrvc.getCart(this.email, this.sessionId).then(successData => {
      this.cartData = successData;
      this.message = this.cartData.message;
    },failureData => {
      this.cartData = failureData;
      this.message = [{'itemName':'No items in cart', 'quantity': '', 'imgUrl':''}];
    });
  }

I have created a cart page which displays the items added in cart by calling an API. The first time I visit the cart page, the API is called and response is received. But second time when I visit the same page again, the same API function is not called.

There might me be some duplicate question regarding this topic but I did not find any relevant answers, after lot of searching on net I have posted this question.

score 6 · Accepted Answer · answered Jan 17 '17 at 05:17

6

You should add the Api call inside the ionViewDidEnter() lifecycle hook for it to be called everytime the user navigates to the page. Please refer the following link :

nav-controller

answered Jan 17 '17 at 05:17

Bala Abhinav

1,328
1
9
15

1

This lifecycle hook works. For detail look into lifecycle hooks of nav controller please visit http://blog.ionic.io/navigating-lifecycle-events/ [link](http://blog.ionic.io/navigating-lifecycle-events/) – Rohit Jan 17 '17 at 18:41
Is there any other "more angular" solution, instead of ionic? – milosdju Apr 14 '18 at 15:15
Is there any way to call function globally(for say all the pages) instead of adding it in ionViewDidEnter in each and every page? – dush Apr 16 '18 at 16:49
1

@dush please raise this as a seperate question and send me the link here, I will try to answer. – Bala Abhinav Apr 18 '18 at 14:07
@dush a probable answer would be to explore class based inheritance where this component will extend another class which will contain a lifecycle hook containing your logic, and the extending class would have to call super.lifecycleHookName() to invoke it – Bala Abhinav Apr 18 '18 at 14:11

score 1 · Answer 2 · edited May 23 '17 at 12:17

1

First read NavController page at the "Lifecycle events" part. I think you can also use this method:

ngOnInit() {
   this.email = this.navParams.get('email');
   this.sessionId = this.navParams.get('sessionId');;
   this.loadCart();
}

also check this link

edited May 23 '17 at 12:17

Community

1
1

answered Jan 16 '17 at 20:56

amin arghavani

1,883
14
21

I agree with you. Call of method in constructor, not handle the case, when you come back to the page. NgOnInit is better way – Jaroslaw K. Jan 16 '17 at 21:07
Thanks for pointing out for reading NavController. This gives me a proper understanding about view appearing and disappearing. The method I used is ionViewDidEnter() which is a lifecycle hook and works perfect. – Rohit Jan 17 '17 at 18:46

score 0 · Answer 3 · answered Jan 16 '17 at 20:36

0

Have you tried to put this.loadCart() inside the constructor, and is that working?

answered Jan 16 '17 at 20:36

hesyar

467
1
5
12

Yes, I have tried inserting the function call this.loadCart() inside constructor, this doesn't work. Because a constructor is called only at the time of new instance is created. And revisiting a page does not initiate a new instance. – Rohit Jan 17 '17 at 04:02

score 0 · Answer 4 · answered Jan 16 '17 at 20:52

import { Component } from '@angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';
import { ItemService } from '../../providers/item-service';
import { ItemDetailsCartPage } from '../item-details-cart/item-details-cart'

@Component({
  selector: 'page-cart',
  templateUrl: 'cart.html',
  providers: [ItemService]
})
export class CartPage {

  email;
  sessionId;
  public cartData: any;
  public message: any = [];

  constructor(public navCtrl: NavController, 
      public navParams: NavParams, 
      public itemSrvc: ItemService,
      public viewCtrl: ViewController
      ) {
      this.ionViewDidLoad();  // add your function here
      }

  ionViewDidLoad() {
    this.email = this.navParams.get('email');
    this.sessionId = this.navParams.get('sessionId');;
    this.loadCart();
  }


  loadCart() {
    this.itemSrvc.getCart(this.email, this.sessionId).then(successData => {
      this.cartData = successData;
      this.message = this.cartData.message;
    },failureData => {
      this.cartData = failureData;
      this.message = [{'itemName':'No items in cart', 'quantity': '', 'imgUrl':''}];
    });
  }

LIVE DEMO

Call a function every time a page is visited - Ionic 2

4 Answers4

Linked