How to properly re-render a component in Ionic manually

Ionic Framework ionic-v3
1

How to force a component re-rendering in Ionic 2, is that possible? I want to update my current component to show the new value that have been changed by the read of a barcode via bluetooth and shown the correct value.

6 Likes
2

To solve this problem, I used NgZone, provided by the package: @angular/core.

The documentation of NgZone says:

"An injectable service for executing work inside or outside of the Angular zone.

The most common use of this service is to optimize performance when starting a work consisting of one or more asynchronous tasks that donā€™t require UI updates or error handling to be handled by Angular. Such tasks can be kicked off via runOutsideAngular and if needed, these tasks can reenter the Angular zone via run."

So, I understood that when I read a code via Bluetooth Serial , that is an asynchronous task, then it donā€™t changed the view. So to force re-render the screen I used .run, that executes a function on a synchronously way within the Angular Zone.

So my code become:

import { NgZone  } from '@angular/core';
import { Events } from 'ionic-angular';
...
constructor(
    public events: Events,
    private zone: NgZone
) {
  this.events.subscribe('updateScreen', () => {
      this.zone.run(() => {
        console.log('force update the screen');
      });
    });
}

...
//So after you read, and do anything you want that does not update the view, call the update Screen
this.events.publish('updateScreen');
...

So if Iā€™m wrong, or if someone know a better way to do this task, feel free to comment.

19 Likes
3

This should not be the case, and if it is I would consider it an ionic-native bug. The Observable should be handling all zone stuff for you; you should not need to be dealing with it in app code.

4

I tried everything before try this solution, and I thought the same thing, that is a ionic-native bug, but I donā€™t have time to spend, so this solution works for the case.

1 Like
5

Same thing happens when I get a notification from OneSignal push notif plugin. I needed to refresh some view content when I received a push notification. The view wasnā€™t updated ā€œautomagicallyā€ because OneSignal does not call NgZone.run method internally. Was forced to do so manually.
This is such a hidden featureā€¦ Thank you so much for this simple answer HugoPetla.

2 Likes
6

I donā€™t know why but this doesnā€™t refresh my pageā€¦
other refresh methods seem to refresh the entire app pages.
Is there any better solution for this now?

7

Thank you for this! I have a list of buttons and wanted to change the style of a specific button when it was pressed. This was the only way I could figure out how to get it to work!

8

This isnā€™t working for me!

My component has calculations and displays the results of these calculations, but they never get updated on the screen.

Local variables in the bluetooth procedure update on the screen OK, but any variables displayed by the component are only updated when the screen is first opened, never afterwards.

Anyone have any suggestions as to what I can try?

I tried calling a function in the component, to do the calculations when the bluetooth values changed, but again the display, in the component, did not update?

I suppose I could have the calculations performed in a provider and pass the display variables to the component, but is that how a component is meant to be used?

9

OK, I thought that a custom component would automatically update when the passed variable was updated in the parent. Apparently not so! Even a basic custom component doesnā€™t update the display when the parent variable changes.

These posts explain that functions in the custom component need to be called from the parent, and this can be done using @ViewChild or #myComponent - a local variable for the component.

10

This solution worked for me in Ionic 4. Thanks

11

Thanks a lot dude, it was very helpful to me ! Had an issue with component class update on keyboard show on iOS, but itā€™s gone now !

12

Hey there

I personally use these three lines to totally refresh a component

    let active = this.navCtrl.getActive(); // or getByIndex(int) if you know it
    this.navCtrl.remove(active.index);
    this.navCtrl.push(active.component);

You can use the ionViewWillLeave() to display your splashscreen while component is reloading and then hide it with ionViewDidEnter() once its loaded.

Hope it helps

Seeya

13

The solution is good but the UI refresh effect is not that good as it pops and push it back. See the solution in this github page.
https://stackoverflow.com/questions/41373951/refresh-a-page-in-ionic2/54613226#54613226
Best UI effect is when you push it again and then pop the active view out. UI effect is pleasant.
Thanks

14

Thanks for your perfect answer.

15

let active = this.navCtrl.getActive(); // or getByIndex(int) if you know it
this.navCtrl.remove(active.index);
this.navCtrl.push(active.component);

How to achieve in case of refreshing multiple components on a single page?

I have a scenario, select a menu option say movie ā€“ > Navigates to movie page with Header as Movie. On executing above line of codes makes header as undefined but refreshes movie page.

16

In ionic 4 , solution from following worked for me

17

this work fine for me thanks!

18

Thanks Hugo now we are on Ionic 6 and Angular 11. Events no longer exist. In fact ionic-angular module no longer exist. So import { Events } from ā€˜ionic-angularā€™; is impossible. I canā€™t seem to find a similar module or easy technique? Any idea?

19

Good.

Please elaborate on the exact situation you are struggling with. There are lots of things people try to use action at a distance for, with many different alternatives. Itā€™s hard to say something generic, but my best attempt at it is here.

20

Iā€™ve recently migrated from ionic 3 to ionic 5 and faced this same issue related lack of events.

I found this solution as service and works fine.

or here