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

Question

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,

You need'nt refresh the page, you need refresh the "data". You can do calling again to the function that subscribe to the get, or splice the array of your data at time you receive that the erase item is completed. Another idea is that you delete function return the list completed, but in Angular rarely you need refresh a page. Yes, I know, it's not an answer is say to you: re-think the problem. — Eliseo
– Eliseo, Commented May 1, 2018 at 11:40
any code example for using subscribe and splice? thanks for your advice. — jamesharvey
– jamesharvey, Commented May 1, 2018 at 11:51

keval nayak · Accepted Answer · 2018-05-01 11:42:06Z

3

Please Try this?

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

answered May 1, 2018 at 11:42

keval nayak

2541 gold badge2 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jamesharvey Over a year ago

I'm sorry but that will refresh the whole app thus I can't use it in my app.

Naga Over a year ago

The solution loses navigation

Bogdan M. Over a year ago

Ofc it does, it uses 'setRoot'

mclem · Accepted Answer · 2018-05-01 12:29:35Z

2

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!

answered May 1, 2018 at 12:29

mclem

1887 bronze badges

2 Comments

jamesharvey Over a year ago

Thanks but this.items.pop() throws me 'cannot delete undefined' error.. any other suggestions?

mclem Over a year ago

I tried to replicate your error, but couldn't seem to get that error :/ I would suggest filtering out the undefined values in the array like this guy did: stackoverflow.com/questions/9596124/… or having your own way of ensuring that you're not trying to delete an undefined value.

shanthan · Accepted Answer · 2019-09-19 10:47:25Z

0

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

answered Sep 19, 2019 at 10:47

shanthan

61210 silver badges9 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related