Ionic Refresh Current Page

Ionic Framework ionic-v3
1

Hi Home can i refresh current page using ionic 2.

3 Likes
2

Yep. Same question. I would like to refresh my ion-list on online and offline eventsā€¦

2 Likes
3

AFAIK this is not possible, just bind to page properties and update them accordingly.

4

Hi, try just to make : location.reload();

hope thatā€™s help :slight_smile:

4 Likes
5

import { ViewChild } from ā€˜@angular/coreā€™;
import { Content } from ā€˜ionic-angularā€™;

export class TestPage {
@ViewChild(Content) content: Content;

update(){
    this.content.resize();
}

}

6 Likes
6

You can try thisā€¦

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

28 Likes
8

did any get how to reload a page

9

What are you actually trying to do? Much of the entire point of Angularā€™s change detection is to eliminate any need to ever be reloading pages.

10

Well Iā€™m opening up a Modal from a page, where I fill in some data, and when I submit the modal (it dismisses), I want that new data to be shown (ā€œwithout reloadingā€) on the page which called the modal in the first place. I canā€™t do it via the Constructor, as itā€™s run only once when the page loads the first time. I need some more clever dynamic data update functionality.

1 Like
11

@dimitri320 I do this with popovers, and I think that with modals you can do the same:

let params: ComponentBParams = {
	param1,
	param2,
};
let popover = this.popoverCtrl.create(ComponentB, params);
popover.onDidDismiss(() => this.refresh());
popover.present();

More info here.

For alerts, I use this approach:

public showAlertTest(options: AlertOptions = {}): Promise<void> {
	return new Promise(resolve => {
		let alert = this.alertCtrl.create(options);
		alert.didLeave.first().subscribe(() => resolve(null));
		alert.present();
	});
}

public test() {
	let options: AlertOptions = {}; // fill with your options
	this.showAlertTest(options).then(() => this.refresh());
}
2 Likes
12

Yes, this is exactly what I got this morning:

modal.onDidDismiss(() => {
this.loadData(ā€œDataā€);
});

But in the end, I decided to scratch the Modal all together! Oh well, a good learning exercise none the less.

13

Worked like a charm ! Thanks !!!

14

can you please look at this problem , and guide me towards the correct solution.
this is a situation that I really need to force refresh or reload the list in the page.

15

Itā€™s working. Thank you :slight_smile:

16

Iā€™m with a problem that when I read via bluetooth an code, I add a value to a variable shown on the screen. The value change but the view just refresh when I press any button. Anyone have a solution to this?

17

this.navCtrl.setRoot(this.navCtrl.getActive().component); itā€™s not the solution :sob:. It removes all previous navigations.

Iā€™m showing a value that changes when I read a bluetooth code. It works perfect, but the variable do not change on screen, it just change when I press any button on the screen. Someone have a solution to this?

2 Likes
18

To solve my problem I used this How to properly re-render a component in Ionic manually

1 Like
19

I read through a bunch of these solutions and really none worked for me.

ionic --version
3.13.0

Since the page is a basically a view

I added to constructor
private viewCtrl: ViewController

make sure to
import {ViewController} from ā€˜ionic-angularā€™;

Iā€™m using

ionViewDidEnter()
to as my main view event refresh

So when I was calling a delete function like

onRemoveItem(idx:number) {
      this.someStorageProvider.deleteItem(idx);
          this.someStorageProvider.getItemList().then(res => {
      this.currentList = res;
      this.viewCtrl._didEnter(); //<---- this is what dis the trick
    });

The ViewController can trigger an
ionViewDidEnter
by
_didEnter() method

this force refresh on my

<ion-list *ngIf=ā€œcurrentList.length > 0ā€ >

Hope this helpsā€¦

2 Likes
20

https://angular.io/guide/displaying-data

21

You can try window.location.reload()