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

**URL:** <https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439>\
**Category:** ionic-v3\
**Created:** [September 22, 2017, 6:34pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439 "2017-09-22T18:34:35Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Xdabier](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xdabier/32/112928_2.png) [@Xdabier](https://forum.ionicframework.com/u/Xdabier)\
**Post date:** [September 22, 2017, 6:34pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/1 "2017-09-22T18:34:35Z")

</div>

ionic tabs doesn’t update view while changing from tab to tab, unless a pop appears,  
here is tab1 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/a/1/a1ae1609537b390bcc11ad7586cf16699574ffee.png)  
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](https://global.discourse-cdn.com/ionicframework/original/3X/0/f/0fedbcf95d2a14870efee507fc943bd24c68fed3.png)  
and here is how it updated when the alert showed ![image](https://global.discourse-cdn.com/ionicframework/original/3X/2/c/2c35baa89998301c3dbf4095e005e072d4f05114.png) …  
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 :

```auto
<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…

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 22, 2017, 9:47pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/2 "2017-09-22T21:47:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Xdabier](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xdabier/32/112928_2.png) [@Xdabier](https://forum.ionicframework.com/u/Xdabier)\
**Post date:** [September 22, 2017, 10:07pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/3 "2017-09-22T22:07:11Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Xdabier](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xdabier/32/112928_2.png) [@Xdabier](https://forum.ionicframework.com/u/Xdabier)\
**Post date:** [September 22, 2017, 10:10pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/4 "2017-09-22T22:10:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 22, 2017, 10:10pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/5 "2017-09-22T22:10:40Z")

</div>

> [@Xdabier](#):
>
> do you have any idea why tabs changing does like that?

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

> [@Xdabier](#):
>
> I looked in the forums, and all of them mentioned that I should use ngZone

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

---

<div class="post-metadata">

**Author:** ![Xdabier](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xdabier/32/112928_2.png) [@Xdabier](https://forum.ionicframework.com/u/Xdabier)\
**Post date:** [September 22, 2017, 10:13pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/6 "2017-09-22T22:13:43Z")

</div>

> [@rapropos](#):
>
> The only reasonable place for doing that is when dealing with external libraries like cordova plugins

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

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 22, 2017, 10:15pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/7 "2017-09-22T22:15:26Z")

</div>

> [@Xdabier](#):
>
> do you suggest that removing all the plugins and reinstalling them, may fix the issue ?

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

---

<div class="post-metadata">

**Author:** ![Xdabier](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xdabier/32/112928_2.png) [@Xdabier](https://forum.ionicframework.com/u/Xdabier)\
**Post date:** [September 22, 2017, 10:17pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/8 "2017-09-22T22:17:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Xdabier](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xdabier/32/112928_2.png) [@Xdabier](https://forum.ionicframework.com/u/Xdabier)\
**Post date:** [September 22, 2017, 11:44pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/9 "2017-09-22T23:44:44Z")

</div>

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

```auto
<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 :

```auto
<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 ?

---

<div class="post-metadata">

**Author:** ![Xdabier](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xdabier/32/112928_2.png) [@Xdabier](https://forum.ionicframework.com/u/Xdabier)\
**Post date:** [September 22, 2017, 11:46pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/10 "2017-09-22T23:46:47Z")

</div>

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
```

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 22, 2017, 11:47pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/11 "2017-09-22T23:47:20Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Xdabier](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xdabier/32/112928_2.png) [@Xdabier](https://forum.ionicframework.com/u/Xdabier)\
**Post date:** [September 22, 2017, 11:49pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/12 "2017-09-22T23:49:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Xdabier](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xdabier/32/112928_2.png) [@Xdabier](https://forum.ionicframework.com/u/Xdabier)\
**Post date:** [September 22, 2017, 11:50pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/13 "2017-09-22T23:50:45Z")

</div>

> [@rapropos](#):
>
> Does anything change if you move the ngIf directives up to it instead?

nope changing it to up didn’t change anything…

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 22, 2017, 11:53pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/14 "2017-09-22T23:53:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Xdabier](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xdabier/32/112928_2.png) [@Xdabier](https://forum.ionicframework.com/u/Xdabier)\
**Post date:** [September 22, 2017, 11:56pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/15 "2017-09-22T23:56:17Z")

</div>

> [@rapropos](#):
>
> Would it be possible for you to upload something to GitHub that reproduces the issue?

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

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 22, 2017, 11:58pm UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/16 "2017-09-22T23:58:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Xdabier](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xdabier/32/112928_2.png) [@Xdabier](https://forum.ionicframework.com/u/Xdabier)\
**Post date:** [September 23, 2017, 12:10am UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/18 "2017-09-23T00:10:57Z")

</div>

[Here are the pages that reproduces the error](https://drive.google.com/open?id=0BymVv8WWjaqZQWdGZTV6dUcwN00) and [here is packages.json](https://drive.google.com/open?id=0BymVv8WWjaqZN25qWm1HN3dkR3M) will these be enough to help you reproduce it please ?

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 23, 2017, 2:44am UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/19 "2017-09-23T02:44:54Z")

</div>

Sorry, link doesn’t work for me.

---

<div class="post-metadata">

**Author:** ![Xdabier](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xdabier/32/112928_2.png) [@Xdabier](https://forum.ionicframework.com/u/Xdabier)\
**Post date:** [September 23, 2017, 7:37am UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/20 "2017-09-23T07:37:14Z")

</div>

can you check again please

---

<div class="post-metadata">

**Author:** ![Xdabier](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/xdabier/32/112928_2.png) [@Xdabier](https://forum.ionicframework.com/u/Xdabier)\
**Post date:** [September 23, 2017, 10:36am UTC](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439/21 "2017-09-23T10:36:26Z")

</div>

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 :

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

```

to

```auto
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](https://global.discourse-cdn.com/ionicframework/original/3X/f/3/f338b7ca3e7c85a902e88fcdc25e34038dec90b0.png)  
and after calling the `compactlist()` methode :  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/6/4/649bcdad444c47aeb1d340f5e7908ff342289b3e.png)  
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 ?

[Next page](https://forum.ionicframework.com/t/ionic-tabs-doesnt-update-view-while-changing-from-tab-to-tab/106439.md?page=2)