Ionic Refresh Current Page

import { ViewChild } from ‘@angular/core’;
import { Content } from ‘ionic-angular’;

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




You can try this…



did any get how to reload a page

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.

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

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

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

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

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

Yes, this is exactly what I got this morning:

modal.onDidDismiss(() => {

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

Worked like a charm ! Thanks !!!

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.

It’s working. Thank you :slight_smile:

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?

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?


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

1 Like

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

ionic --version

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

to as my main view event refresh

So when I was calling a delete function like

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

The ViewController can trigger an
_didEnter() method

this force refresh on my

<ion-list *ngIf=“currentList.length > 0” >

Hope this helps…


You can try window.location.reload()

Don’t do reload(), it messes things up down the road like sqlite plugin and possibly other internal states outside the webview

If there is a problem with change detection by angular (which may also indicate a design issue), wrap your stuff in a zone so angular knows what to monitor.

Dont go calling internal onWillEnter etc.

somehow doesn’t seem to work, this was my first attempt too…

Someone buy Beer For @dupinder … works like champ


Guys, checkout this helpful video I found which shows how to do pull-to-refresh a page in ionic application:

Auto-Refresh on Event Triggering

Add the following code by @dupinder: