Skip to content
This repository was archived by the owner on May 4, 2022. It is now read-only.
This repository was archived by the owner on May 4, 2022. It is now read-only.

[Ionic 3] ion-tab with *ngFor does not show tabs #317

@ionitron-bot

Description

@ionitron-bot

Original issue by @anatoly-spb on 2017-10-27T16:40:14Z

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions