Refresh a page in ionic2

Question

Is there a way to refresh only a page i.e. only one screen in ionic2.

I tried :

window.location.reload();

and

location.reload();

but it rebuilds the app .. is there a way to refresh only that page (particular screen).

Also tried:

<ion-input *ngIf="no_internet === 1" (click)="refresh($event)"></ion-input>

in TypeScript:

refresh(refresher) {
    console.log('Begin async operation', refresher);

    setTimeout(() => {
        console.log('Async operation has ended');
        refresher.complete();
    }, 2000);
}

Answer 1

Try this, just pop one page and then push that page again.

this.navCtrl.pop(); 
this.navCtrl.push(NewPage);

Hope this will help.

Answer 2

I would do that : (based on @Ahmad Aghazadeh answer)

this.navCtrl.push(this.navCtrl.getActive().component).then(() => {
   let index = this.viewCtrl.index;
   this.navCtrl.remove(index);
})

=> Push this page once more (loading it again)

=> Remove the page we were on (using index)

Answer 3

Example of using ion-refresher in an async function in ionic 3:

in your .html file:

<ion-content no-padding >
<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

and in your .ts file:

    constructor(...) {
     ...
    samplefuncion(null){
       asyncFunction().then(()=>{
    ...//after success call
    ...
    if (event)    
    event.complete();

    },(error)=>{
    ....
    if (event)
    event.complete();
    })
    }

         doRefresh(event) {
            samplefuncion(event);        
          }

Answer 4

If you are willing to follow a common convention, I have found a very easy way to reload the current view (including all of its parameters). I tested this using Ionic3, but it should still apply in Ionic 2

Move all of your initialization code for every page into ionViewDidLoad(), which is run ONCE on the first time the view is loaded

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Api } from '../../providers/api';
import { Movie } from '../../interfaces/movie';

@Component({
    selector: 'page-movie-info',
    templateUrl: 'movie-info.html'
})
export class MovieInfoPage {

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        public api: Api
    ) {
    }

    /**
     * Run all page initialization in this method so that this page
     * can be refreshed simply by re-calling this function
     */
    ionViewDidLoad() {
        //access any parameters provided to the page through navParams. 
        var movieId = this.navParams.data.movieId;
        this.api.movies.getById(movieId).then((movie) => {
            this.movie = movie;
        });
    }
    public movie: Movie;
}

From anywhere else in the app, you can reload the current view with this code

//get the currently active page component
var component = this.navController.getActive().instance;
//re-run the view load function if the page has one declared
if (component.ionViewDidLoad) {
    component.ionViewDidLoad();
}

Answer 5

Html:

  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

</ion-content>

TypeScript :

@Component({...})
export class NewsFeedPage {

  doRefresh(refresher) {
    console.log('Begin async operation', refresher);

    setTimeout(() => {
      console.log('Async operation has ended');
      refresher.complete();
    }, 2000);
  }

}

source : Ionic doc

Answer 6

Try this code :

this.navCtrl.setRoot(this.navCtrl.getActive().component);