[Ionic 4] How to reload page after navigating

Ionic Framework ionic-v3
1

Hi guys,

I have a page which shows informations for each user.
He can update those informations by going on another page.
When he saves his informations, he’s redirected on the previous page where he can see his infos again.

Problem is the previous page isn’t reloaded, so he doesn’t see the changes he made.

This is the code which is executed when I click on my save button:

updateInfos() {
    this.submitAttempt = true;
    this.api.post('update', this.formMaFiche.value)
      .subscribe(res => {
        if (res.result === 'success') {
          this.router.navigate(['/tabs/tab1'], {state: {updateInfos: true}});
        }
      }, err => {
        console.log(err);
        this.alert.present();
      });
}

But tabs/tab1 page isn’t reloaded, it’s just shown like it was before leaving it.

How can I reload it ?

Thanks :slight_smile:

2

You can use the ionViewWillEnter Lifecycle event to (re)initiate your page to it’s defaults.
Basically if you’d set every ‘default’ value in the event, everytime that page ‘opens’ it will ‘reset’.

1 Like
3

Yeah I forgot to say that my second page (where the user updates his infos) isn’t part of the tabs, so the ionViewWillEnter event won’t trigger. I don’t know if it’s a bug or not but most of us want this event to be triggered even if we come from a page that isn’t part of the tabs.

So I really wonder how to achieve this without using this event… I don’t even know if it’s possible actually.

4

What about using Events?


Ps: Docs are from 3, but this works with Ionic 4 too

1 Like
5

Sure, that should do the job ! I’ll try this on monday, I’ll keep this post updated :wink:
Thanks !

6

Job’s done with Events ! Thanks @bilow :wink:

1 Like
7

Glad to hear it worked out for you!

Just keep in mind that you keep track of your subscriptions/events and Unsubscribe (!) when done using them. Otherwise (eventually) you might end up with memory leaks which will crash your app.

1 Like
8

Hell yeah bro I didn’t think about it, you saved my app :heart_eyes:

events.subscribe('user:updated', () => {
      this.updateInfos = true;
      this.ngOnInit();
    });

But should I unsubscribe here ? And if I trigger the event again, will it still work ?

9

As expected, if I unsubscribe for the event, I can’t trigger it again, which means that if my user wants to update his informations twice, the recap page won’t be refreshed twice, but only once.

So, where would you unsubscribe to such an event ?

10

To be clear: It’s not like you have to necessarily unsubscribe for each event. If you want to keep using the event just keep it running. My warning was more to you make you aware of the running ‘background processes’ and it’s potential dangers. I’ve seen many examples in programming (general) where some subscribe to an event and forget about it. They continue using the application and under the hood the app is subscribing like 1000 times (e.g.) for the same event. This means the user is ending up processing the same event for 1000 times(!). This attempt of processing the bulk of ‘events’ might be a hard task for some devices. It may slow down your application and/or even end up crashing your application. In this case: unloading/leaving a ‘view’ is not cleaning up for you the running events and/or subscriptions.

As far as I’ve understand you have a page displaying some data from which you can navigate to another page to edit/update that data. After updating you can navigate ‘back’ and you see the ‘updated’ data?

I’m not sure why your navigation isn’t working properly, but I’ll try to help you out with the situation just as it is. In this example you can keep updating your data and the other view will keep processing the updated data. When navigating back, you unsubscribe for both events.

// data view page
private goToEdit() {
    this.events.subscribe('user:updated', (updatedData) => {
        // do something when updated data
        this.foo = updatedData;
    });

    // event subscription to keep track of your 'state'. Here you'll 'unsubscribe' when done
    this.events.subscribe('returnedFromEdit', () => {
        this.events.unsubscribe('user:updated');
        this.events.unsubscribe('returnedFromEdit');
    });

    // ..navigate to edit page logic..
}

............

// edit page
private updateData() {
    // some processing

    this.events.publish('user:updated', yourUpdatedData);
}

private navigateBack() {{
    this.events.publish('returnedFromEdit'); // naming could be better :-)

    // ..navigate back logic..
}

Good luck!

Btw: If someone has some other suggestions/ideas, I’d like to hear them too!

3 Likes
11

Nice idea and example @bilow !
It works like a charm, really.

Thank you for the explanations and example, I adapted it to fit my app, but you understood what I needed :wink:

1 Like
12

To refresh component
import { ViewWillEnter } from ‘@ionic/angular’;

export class componentName implements ViewWillEnter {
ionViewWillEnter() {
// do what ever u want to do
}
}

// able to refresh in ionic 4+ using this process