How create dynamic tab IONIC

Ionic Framework ionic-v3
1

Hi all,

I want create a dynamic tab from json data but not working

Ex tabs.ts:

this.tabs = [{name: "tab1", root: "tab1root", icon: "map"},.....]

and this my html:

<ion-tabs>
  <ion-tab *ngFor="#tab of tabs" 
    [root]="{{ tab.root }}" tabTitle="{{ tab.name }}" tabIcon="{{ tab.icon }}"></ion-tab>
  
</ion-tabs>

Thank you so much!

2 Likes
2

Hey there!

So there are a few things going on here. I’m going to use the conference app (master branch) as an example of transforming static tabs to dynamic tabs. In the tabs.html file, the tabs are written like this:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Schedule" tabIcon="calendar"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Speakers" tabIcon="contacts"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Map" tabIcon="map"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
</ion-tabs>

And in the tabs.js file, the root property for each tab is set like this:

this.tab1Root = SchedulePage;
this.tab2Root = SpeakerListPage;
this.tab3Root = MapPage;
this.tab4Root = AboutPage;

Note that the value being set to each root property is a @Page component, and not a string. However, the value being set for tabTitle and tabIcon is a string. When a property is wrapped in brackets [] it tells the property to look for an expression, this is known as property binding.

So, we can convert our tabs by using the following template markup:

<ion-tabs>
  <ion-tab *ngFor="#tab of tabs" [root]="tab.root" [tabTitle]="tab.title" [tabIcon]="tab.icon"></ion-tab>
</ion-tabs>

We are wrapping each property in brackets because we want it to use the template expression and not the string "tab.title", "tab.icon", etc. Then, back in our tabs.js file, we can create the tabs:

this.tabs = [
  { title: "Schedule", root: SchedulePage, icon: "calendar" },
  { title: "Speakers", root: SpeakerListPage, icon: "contacts" },
  { title: "Map", root: MapPage, icon: "map" },
  { title: "About", root: AboutPage, icon: "information-circle" },
];

Angular has a great cheat sheet that is super helpful and it goes over template syntax: https://angular.io/docs/ts/latest/guide/cheatsheet.html

Please let me know if any of the above doesn’t make sense, thanks!

6 Likes
3

Yeah! Thanks @brandyshea

I wrong because pass root as a string. :smiley:

Thanks again.

5

Hi @brandyshea
I tried this, and found a weird situation on page load. Unless I click on the bottom tab-bar area, neither tab-bar is visible, nor any data. the screen remain white.
As soon as I click on tab-bar at bottom, all goes fine.
Here is what I followed,
I started a ionic tab bar template project, and on tab page, created a Tab array in .TS and ion-tab in HTML, just the way you had created.

6

The way you write this sounds like you are attempting to have two tab bars in one page. In addition to being a confusing and contraindicated UI, I don’t believe that is technically supported in Ionic. If you absolutely insist, you can look into faking one of them using segments.

7

Does that mean with dynamic tabs we can’t use lazy loading?

8

Hi@brandyshea ,
my doubt is how can we generate dynamic pages with a single
{ title: "Schedule", root: SchedulePage, icon: "calendar" }
Iam handling ionic3 it shows the error of invalid linkpage.
Is it possible dynamic page creation in ionic 3.9.2
Also Is this workable in ionic supertabs?
Thanks in advance

9

Hi@brandyshea
How this become dynamic?
Here all tabs are u already defined as an tabarray.
Iam in trouble with handling network response with tabarray.
Tab is not visible with dynamic data.
can you please suggest a solution?

this.tabs = [
  { title: "Schedule", root: SchedulePage, icon: "calendar" },
  { title: "Speakers", root: SpeakerListPage, icon: "contacts" },
  { title: "Map", root: MapPage, icon: "map" },
  { title: "About", root: AboutPage, icon: "information-circle" },
];

Incase of networkdata contains lots of error with ionic dynamictabs.
How can I handle the loading of view related with network response?

<ion-tabs  tabsPlacement="top">
  <ion-tab *ngFor="let items of productcategory" [root]="items.catid" [tabTitle]="items.catname"> 
 </ion-tab>
</ion-tabs>

No error but tab is not visible
This is my network response

this.productcategory=
       [
           {catid:"129",catname:"vegetables"},
           {catid:"130",catname:"fruits"}
        ]
1 Like
10

This won’t work as you are not providing the component to the root. [root] expects page/component to be loaded. In your case, you are setting 129 as a root, is that a page or component?

And try calling service on ngOnInit().

May be this will help you.