Ionic-framework: [Ionic 3] ion-tab with *ngFor does not show tabs

[anatoly-spb]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When I try to create dynamic tabs:

<ion-tabs>
  <ion-tab [root]="terminalPage" [rootParams]="item" *ngFor="let item of terminals;" tabIcon="information-circle" [tabTitle]="item.rwcct_ixname"  ></ion-tab>
</ion-tabs>

my page shows nothing, tabs are not appeared.
If I add one static page before dynamic pages:

<ion-tabs>
  <ion-tab [root]="terminalPage" tabIcon="information-circle" tabTitle="Dummy"  ></ion-tab>
  <ion-tab [root]="terminalPage" [rootParams]="item" *ngFor="let item of terminals;" tabIcon="information-circle" [tabTitle]="item.rwcct_ixname"  ></ion-tab>
</ion-tabs>

all tabs are shown.

Expected behavior:

I expect that the following code

<ion-tabs>
  <ion-tab [root]="terminalPage" [rootParams]="item" *ngFor="let item of terminals;" tabIcon="information-circle" [tabTitle]="item.rwcct_ixname"  ></ion-tab>
</ion-tabs>

must show tabs

Steps to reproduce:

Create page with tabs and add *ngFor to make it dynamic.

Related code:

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

H:\src\trunk\src\ionic\rms>ionic info

cli packages: (h:\npm\node_modules)

    @ionic/cli-utils  : 1.15.2
    ionic (Ionic CLI) : 3.15.2

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 26.1.1
    Node              : v6.9.2
    npm               : 3.10.10
    OS                : Windows 7

Environment Variables:

    ANDROID_HOME : h:\mobile\android\sdk

Misc:

    backend : pro


H:\src\trunk\src\ionic\rms>

[ghost]

I'm having the same issue here. I hope someone can help us!

[MariaEduardaSpiess]

Same here!

[anatoly-spb]

I forgot about my bug report. There is a workaround with *ngIf:

<ion-tabs *ngIf="terminals">
  <ion-tab [root]="terminalPage" [rootParams]="item" *ngFor="let item of terminals;" tabIcon="information-circle" [tabTitle]="item.rwcct_ixname"  ></ion-tab>
</ion-tabs>

supposing termnials equals to null initially.

[M-Azuma]

Same. Worked around thanks to @anatoly-spb .

  <ion-tabs tabsPlacement="top" *ngIf="(categories$ | async)?.data as categories">
    <ion-tab [root]="tab1Root" [rootParams]="{ cid: category.id }"
             *ngFor="let category of categories"
    [tabTitle]="category.title"></ion-tab>
  </ion-tabs>

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/317