Refresh a page in ionic2

javascript html angular ionic2 refresher

33,833

Solution 1

Try this code :

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

Solution 2

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/

Solution 3

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)

Solution 4

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

View more solutions

33,833

Author by

Narendra Vyas

Updated on July 09, 2022

Comments

Narendra Vyas almost 2 years

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

catu over 7 years

then create a (click)="refresh()" action on the button, and create a refresh method in the ts file
Narendra Vyas over 7 years

I request you to look my updated question, can you please suggest where am i wrong.
catu over 7 years

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?
Narendra Vyas over 7 years

forum.ionicframework.com/t/ionic-2-refresh-current-page/4716‌7/3
catu over 7 years

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.
Yawar almost 7 years

it removes all previous navigations.
Joe Sleiman almost 7 years

it's not solution , as @Yawar said, you removes all previous navigations ,
abo-elleef almost 6 years

and method ionViewWillEnter can be used to manage any preparation for the new loaded view
Anand_5050 over 5 years

Removes all navigation. Not a solution
Anand_5050 over 5 years

Try this: Just pop one page and then push that page again. Hope this will help :) this.navCtrl.pop(); this.navCtrl.push(NewPage);
Ahmed Wahba over 4 years

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