Ionic tabs doesn't update view while changing from tab to tab

Ionic Framework ionic-v3
1

ionic tabs doesn’t update view while changing from tab to tab, unless a pop appears,
here is tab1 image
and here it’s the second tab files that’s supposed to be highlighted in the tabs bar and zeros should be the numbers of files image
and here is how it updated when the alert showed image …
and this issue isn’t only happening to the ionic tabs I have an other page that it’s view is supposed to be changing whenever I change a variable to true or false for example :

<ion-label *ngIf="!compact">Compact list</ion-label>
<ion-label *ngIf="compact">Expanded list</ion-label>

but it’s issue is it is always showing the view according to the first value of the variable, and only changes it when an alert shows…
sometimes everything works perfectly, and when I reload the issues comes back…

1 Like
2

I don’t have anything concrete to back this up, but it seems to me that <ion-item> gets cranky when its children appear and disappear via change detection. The heuristic I have come up with is to only use structural directives (such as ngIf and ngFor) on the <ion-item> itself, not on anything underneath it.

3

I got you, but do you have any idea why tabs changing does like that? because it’s too weird, last night it was working perfectly, whereas today, somehow it started having that view update issue, I looked in the forums, and all of them mentioned that I should use ngZone, but, I didn’t where should I use ngZone exactly in the tabs changing code…

4

Should I provide you with the pages code, and my ionic version ?

5

I don’t think it has much of anything to do with tabs per se, but rather structural directives.

I would strongly recommend against starting down that road. You should not need to be manually dealing with zones ever. The only reasonable place for doing that is when dealing with external libraries like cordova plugins, and that is why ionic-native exists (to deal with zonifying them so app code doesn’t have to).

6

So do you suggest that removing all the plugins and reinstalling them, may fix the issue ?

7

No, I was just saying that dealing with plugins that aren’t zone-aware is the only place anybody needs to be worrying about zones.

I would try rewriting the templates so that there are no structural directives on anything inside an <ion-item>.

8

Awesome, I’ll try that right now and tell you how it goes ^^

9

Well I did as you told me, my code was like that :

<ion-fab-list side="left">
      <button ion-fab (click)="compactlist()">
        <ion-icon name="logo-buffer"></ion-icon>
        <ion-label  *ngIf="!compact">Compact list</ion-label>
        <ion-label  *ngIf="compact">Compact list</ion-label>
      </button>
</ion-fab-list>

so I changed it to that as you told me :

<ion-fab-list *ngIf="!compact" side="left">
      <button ion-fab (click)="compactlist()">
        <ion-icon name="logo-buffer"></ion-icon>
        <ion-label>Compact list</ion-label>
      </button>
    </ion-fab-list>
    <ion-fab-list *ngIf="compact"  side="left">
      <button ion-fab (click)="compactlist()">
        <ion-icon name="logo-buffer"></ion-icon>
        <ion-label>Expanded list</ion-label>
      </button>
    </ion-fab-list>

and nothing changed… any other suggestions please ?

10

here’s my : ionic info output
ionic info

cli packages: (/usr/lib/node_modules)

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.6.1

System:

Android SDK Tools : 25.2.5
Node              : v7.10.1
npm               : 4.2.0 
OS                : Linux 4.4

Misc:

backend : pro
11

Hmm, I’m not seeing any <ion-item>s at all. I assume what you’ve posted here is contained inside an <ion-fab>. Does anything change if you move the ngIf directives up to it instead?

12

should I add <ion-item> into <ion-fab> ? will that look the same as using<button> ?

13

nope changing it to up didn’t change anything…

14

Sorry, I guess I led you on a wild goose chase, then. Would it be possible for you to upload something to GitHub that reproduces the issue?

15

I’m afraid I can’t because the client’s rules is to not let anything of the app’s code on github…
but I’ll post pages that has errors code here in replies

16

I’m not sure where to look, so I would need something complete enough that would allow me to reproduce the issue locally.

18

Here are the pages that reproduces the error and here is packages.json will these be enough to help you reproduce it please ?

19

Sorry, link doesn’t work for me.

20

can you check again please

21

I guess the main issue here is that ionic-tabs is somehow running out of the angular zone, when I updated this code here from :

compactlist(){
    this.compact = !this.compact;
  }

to

compactlist(){
    this.zone.run(() => {this.compact = !this.compact;})
  }

the users view started updating no matter where my *ngIf was.
like it is showing here :
before calling the compactlist() methode :
image
and after calling the compactlist() methode :
image
and it is still working no matter how many times I reload the page, not like before, when the view was only updating when something else shows up.
The issue now is still in the view update from tab to tab,… is there anyhow to change tabs using ngZone ?

2 Likes