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);
}

can you explain what exactly are you trying to update in your page? when using ionic there are other ways to upload the content, refreshing the page is not recommended — Alexandre Justino, Dec 29 '16 at 07:52

score 19 · Accepted Answer · answered May 02 '17 at 11:31

19

Try this code :

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

answered May 02 '17 at 11:31

Ahmad Aghazadeh

16,571
12
101
98

4

it removes all previous navigations. – Yawar May 24 '17 at 15:38
4

it's not solution , as @Yawar said, you removes all previous navigations , – Joe Sleiman Jun 13 '17 at 08:53
Removes all navigation. Not a solution – Anand_5050 Sep 23 '18 at 11:28
1

Try this: Just pop one page and then push that page again. Hope this will help :) this.navCtrl.pop(); this.navCtrl.push(NewPage); – Anand_5050 Sep 23 '18 at 11:28
To avoid affecting on the navigation, I work around refreshing view by wrapping components ( _product list_) need to be updated in a function and call it on **didLoad**, **add** and **delete** actions – Ahmed Wahba Jan 23 '20 at 23:14

score 3 · Answer 2 · answered Dec 29 '16 at 06:12

3

You could also use the ionic refresher, to create a pull to refresh action on the page

http://ionicframework.com/docs/v2/api/components/refresher/Refresher/

answered Dec 29 '16 at 06:12

catu

888
6
24

then create a (click)="refresh()" action on the button, and create a refresh method in the ts file – catu Dec 29 '16 at 06:18
I request you to look my updated question, can you please suggest where am i wrong. – Narendra Vyas Dec 29 '16 at 06:26
Well, usually you'd pass in an $event in the method call in the template, but if you have the 'refresher' variable set up as something earlier in the template, I guess it should work. Otherwise try passing in $event in your template. But do you really need to pass anything in. Could you not just call you ionViewWillEnter() method, or create a method that refreshed the data you need on the page? – catu Dec 29 '16 at 06:36
https://forum.ionicframework.com/t/ionic-2-refresh-current-page/47167/3 – Narendra Vyas Dec 29 '16 at 06:48
Your ion-list or whatever you're using is getting its' data from an array in your ts file, correct? Then just update that array in your refresh method, and the list will update. – catu Dec 29 '16 at 06:54

score 2 · Answer 3 · answered Nov 08 '17 at 08:17

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)

answered Nov 08 '17 at 08:17

Cedric

149
1
3
12

and method `ionViewWillEnter` can be used to manage any preparation for the new loaded view – abo-elleef Jun 23 '18 at 08:57

Hamid Araghi · Answer 4 · 2018-09-12T14:52:36.000

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);        
          }

score 0 · Answer 5 · answered Sep 23 '17 at 02:13

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();
}

score 0 · Answer 6 · edited Jul 23 '18 at 21:01

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

score 0 · Answer 7 · edited Sep 23 '18 at 18:50

0

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

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

Hope this will help.

edited Sep 23 '18 at 18:50

Alex Kulinkovich

4,408
15
46
50

answered Sep 23 '18 at 11:41

Anand_5050

1,019
2
10
23

score -2 · Answer 8 · answered Dec 29 '16 at 06:05

Try this: $window.location.reload(); $route.reload() use to reload route.

if you are using $stateProvider : $state.go($state.current, {}, {reload: true});

or

var currentPageTemplate = $route.current.templateUrl;
$templateCache.remove(currentPageTemplate);
$route.reload();

Refresh a page in ionic2

8 Answers8

Linked