How to properly re-render a component in Ionic manually

#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.

5 Likes
Ionic Refresh Current Page
#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.

16 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.

http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview

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

Ionic Refresh Current Page
#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.


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.