CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2
Rohit
Rohit

Reputation: 11

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

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.

Upvotes: 0

Views: 11507

Answers (4)

Bala Abhinav
Bala Abhinav

Reputation: 1348

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

Upvotes: 7

amin arghavani
amin arghavani

Reputation: 1883

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

Upvotes: 1

Aravind
Aravind

Reputation: 41581

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

Upvotes: 0

hesyar
hesyar

Reputation: 475

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

Upvotes: -1

Related Questions