CODEWITHSUNDEEP
angularionic-frameworkionic2ionic3angular5
jamesharvey
jamesharvey

Reputation: 165

How to refresh a page on Ionic 3 (Ionic, Angular 5)

I’m building a favorite list which I can erase list items within a page. It’s based on Ionic sqlite storage.

I found Ionic page will keep removed ion list items until I re-enter the list page. So it needs refreshing a page upon removing an item from ionic storage.

How can I refresh a particular page? window.location.refresh() seems to refresh the entire pages… this is not what I’m trying to do.

I need to refresh a single page out of twenty pages on my app so navCtrl.setRoot() will not work either.

Thanks in advance,

Upvotes: 3

Views: 26574

Answers (3)

shanthan
shanthan

Reputation: 612

use NgZone. It will refresh the component.

import { NgZone } from '@angular/core';

constructor(private zone: NgZone) {}

refresh() {
  this.zone.run(() => {
    console.log('force update the screen');
  });
}

Upvotes: 0

mclem
mclem

Reputation: 188

If you're going for a list of items, I would suggest displaying them with an ngFor directive. That way when you update the list, it will automatically be updated where it is displayed rather than having to refresh the page or anything like that. Here's a short example:

HTML

<ion-content>
 <ion-list> 
  <div *ngFor="let item of items">
    <p>{{item.name}}</p>
  </div>
  <button (click)="deleteFromArray()">Delete From Array</button>
  <button (click)="addToArray()">Add To Array</button>
 </ion-list> 
</ion-content>

TYPESCRIPT

items: any[] = [{name:'Penguin'},{name:'Seal'},{name:'Lion'}];

deleteFromArray() {
  this.items.pop();
}

addToArray() {
  this.items.push({name: 'Whale'});
}

Hope this helps!

Upvotes: 2

keval nayak
keval nayak

Reputation: 254

Please Try this?

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

Upvotes: 3

Related Questions