CODEWITHSUNDEEP
ionic-frameworkionic4
Gannon Kolding
Gannon Kolding

Reputation: 11

Force a component to re-render in ionic v4-beta

I have an app with several button components in a tab bar, serving as the app's navigation. I want the selected tab's button to have a solid fill instead of outline, so I used the following html:

<ion-tab-button #tab1 tab="home" href="/tabs/(home:home)">
  <ion-button class="button-tab" fill="{{toggleState1}}" shape="round">
    <ion-icon name="home"></ion-icon>
  </ion-button>
</ion-tab-button>

this repeats two more times for the following tabs.

and the accompanying page.ts (everything is imported and declared above):

public highlightTab(myTabs) {
this.mainTabs.getSelected().then(data => {
  let selectedTab = data;
  console.log(selectedTab.id);
  if (selectedTab.id = "tab-view-home") {
    this.toggleState1 = "solid";
    this.toggleState2 = "outline";
    this.toggleState3 = "outline";
  }
  else if (selectedTab.id = "tab-view-about") {
    this.toggleState1 = "outline";
    this.toggleState2 = "solid";
    this.toggleState3 = "outline";
  }
  else if (selectedTab.id = "tab-view-contact") {
    this.toggleState1 = "outline";
    this.toggleState2 = "outline";
    this.toggleState3 = "solid";
  }
});

Through some experimentation, I've found that this script actually does everything I want it to do (even if it's not the prettiest code I've ever written). The only hangup is that after changing the toggleState variables in any combination, the buttons don't actually update. I've found a few ways of doing this in previous versions of ionic (using either NgZone or the now-deprecated ViewController), but I have yet to find a solution that works in ionic v4. If anyone knows how to force an individual component to redraw, or even an alternate method of changing the buttons' fill states that doesn't require a force redraw, please let me know.

Upvotes: 1

Views: 4188

Answers (1)

Matti Lehtinen
Matti Lehtinen

Reputation: 1764

Maybe you are updating the properties outside angular zone. To put it simply: there are some scenarios where angular does not detect changes.

To make sure angular detects the changes, put the logic which modifies the properties inside zone.run():

constructor(private zone:NgZone) {  
}

public highlightTab(myTabs) {
    this.mainTabs.getSelected().then(data => {
      this.zone.run(() => { 
          let selectedTab = data;
          console.log(selectedTab.id);
          if (selectedTab.id = "tab-view-home") {
            this.toggleState1 = "solid";
            this.toggleState2 = "outline";
            this.toggleState3 = "outline";
          }
          else if (selectedTab.id = "tab-view-about") {
            this.toggleState1 = "outline";
            this.toggleState2 = "solid";
            this.toggleState3 = "outline";
          }
          else if (selectedTab.id = "tab-view-contact") {
            this.toggleState1 = "outline";
            this.toggleState2 = "outline";
            this.toggleState3 = "solid";
          }
        });
    });
}

Upvotes: 6

Related Questions