# Ionic3 dynamic supertabs possible or not?

**URL:** <https://forum.ionicframework.com/t/ionic3-dynamic-supertabs-possible-or-not/132626>\
**Category:** ionic-v3\
**Created:** [June 11, 2018, 1:40pm UTC](https://forum.ionicframework.com/t/ionic3-dynamic-supertabs-possible-or-not/132626 "2018-06-11T13:40:38Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![vibinflogesoft](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/vibinflogesoft/32/117525_2.png) [@vibinflogesoft](https://forum.ionicframework.com/u/vibinflogesoft)\
**Post date:** [June 11, 2018, 1:40pm UTC](https://forum.ionicframework.com/t/ionic3-dynamic-supertabs-possible-or-not/132626/1 "2018-06-11T13:40:38Z")

</div>

**Hi,**  
**Is it possible to create ionic3 dynamic supertabs?**  
**Any suggestion is appreciable**

---

<div class="post-metadata">

**Author:** ![anna\_liebt](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@anna\_liebt](https://forum.ionicframework.com/u/anna_liebt)\
**Post date:** [June 11, 2018, 8:43pm UTC](https://forum.ionicframework.com/t/ionic3-dynamic-supertabs-possible-or-not/132626/2 "2018-06-11T20:43:29Z")

</div>

Hello,

if you mean to set an array of super-tab, that will set to your super-tabs? Yes, you can use for example ngFor to add super-tab to super-tabs

Best regards, anna-liebt

---

<div class="post-metadata">

**Author:** ![vibinflogesoft](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/vibinflogesoft/32/117525_2.png) [@vibinflogesoft](https://forum.ionicframework.com/u/vibinflogesoft)\
**Post date:** [June 12, 2018, 4:29am UTC](https://forum.ionicframework.com/t/ionic3-dynamic-supertabs-possible-or-not/132626/3 "2018-06-12T04:29:41Z")

</div>

Hi@anna\_liebt thanks for your reply.  
Actually my requirement is dynamic.According to the backend data structrure or API response (dynamic),i want to create the tabs.need to bind ngFor with supertabs.But Cannot set the tab of array already.If the API data contains 4 number of array items then i want to show four tabs,if it is 6 i wanna show 6 tabs.

---

<div class="post-metadata">

**Author:** ![anna\_liebt](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@anna\_liebt](https://forum.ionicframework.com/u/anna_liebt)\
**Post date:** [June 12, 2018, 8:04am UTC](https://forum.ionicframework.com/t/ionic3-dynamic-supertabs-possible-or-not/132626/4 "2018-06-12T08:04:04Z")

</div>

hello,

if I understand it correct, than you need only do the same as you would do with structural directives on any other html element like

```auto
<super-tabs #tabcontainer *ngIf="pages" [config]="{ sideMenu: 'left' }" selectedTabIndex="0" (tabSelect)="onTabSelect($event)">
    <super-tab *ngFor="let item of pages" [root]=item id={{item}}></super-tab>
  </super-tabs>

```

where the array pages holds everything you need for your super-tab. [root}=item where item is your page as object or string depending on eager loaded or lazy loaded pages.

Best regards, anna-liebt

---

<div class="post-metadata">

**Author:** ![vibinflogesoft](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/vibinflogesoft/32/117525_2.png) [@vibinflogesoft](https://forum.ionicframework.com/u/vibinflogesoft)\
**Post date:** [June 12, 2018, 8:36am UTC](https://forum.ionicframework.com/t/ionic3-dynamic-supertabs-possible-or-not/132626/5 "2018-06-12T08:36:24Z")

</div>

Hi@anna\_liebt  
Iam doing like this and the tab is visible as expected.  
Now the issue is on swiping the tab  
`core.js:1350 ERROR Error: Uncaught (in promise): TypeError: Cannot read property '_willLeave' of undefined`  
and  
`TypeError: Cannot read property 'getActiveChildNavs' of undefined`

This is mycode

```auto
<super-tabs id="mainTabs" selectedTabIndex="1" toolbarColor="light" toolbarBackground="dark" indicatorColor="light" badgeColor="light" [config]="{ sideMenu: 'left' }" (tabSelect)="onTabSelect($event)">
  <super-tab *ngFor="let tab of productcategory" [root]=tab title={{tab.catname}} ></super-tab>
</super-tabs>

```

---

<div class="post-metadata">

**Author:** ![anna\_liebt](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@anna\_liebt](https://forum.ionicframework.com/u/anna_liebt)\
**Post date:** [June 12, 2018, 9:01am UTC](https://forum.ionicframework.com/t/ionic3-dynamic-supertabs-possible-or-not/132626/6 "2018-06-12T09:01:55Z")

</div>

Hello,

whatever.\_willLeave is not available or not at the time available. Take care that whatever is at that time available, when \_willLeave is called. Same with getActiveChildNavs.

Maybe this depends that productcategory is not ready at that time, try an \*ngif in super-tabs like I have in above example. Maybe it solves your problem.

Best regards, anna-liebt

---

<div class="post-metadata">

**Author:** ![vibinflogesoft](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/vibinflogesoft/32/117525_2.png) [@vibinflogesoft](https://forum.ionicframework.com/u/vibinflogesoft)\
**Post date:** [June 12, 2018, 9:17am UTC](https://forum.ionicframework.com/t/ionic3-dynamic-supertabs-possible-or-not/132626/7 "2018-06-12T09:17:40Z")

</div>

Hi,  
still facing the issue,iam calling the productcategory inside constructor  
should i change it from there to any other life cycle event or give a settimeout for productcategory?  
Can you suggest any options?

---

<div class="post-metadata">

**Author:** ![anna\_liebt](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@anna\_liebt](https://forum.ionicframework.com/u/anna_liebt)\
**Post date:** [June 12, 2018, 9:25am UTC](https://forum.ionicframework.com/t/ionic3-dynamic-supertabs-possible-or-not/132626/8 "2018-06-12T09:25:10Z")

</div>

Hello,  
I guess your call is asyncronously. In this case you never know, when your array is filled and available (maybe never). (Also take a look how you fill it, maybe it is better to fill a temp array, that is later assign to your array used in super-tabs.

If this is the problem, then use \*ngIf to put super-tabs to dom, when your array is filled.

Best regards, anna-liebt.

---

<div class="post-metadata">

**Author:** ![vibinflogesoft](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/vibinflogesoft/32/117525_2.png) [@vibinflogesoft](https://forum.ionicframework.com/u/vibinflogesoft)\
**Post date:** [June 12, 2018, 9:29am UTC](https://forum.ionicframework.com/t/ionic3-dynamic-supertabs-possible-or-not/132626/9 "2018-06-12T09:29:59Z")

</div>

hi@anna\_liebt  
Thanks for your suggestion

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:32pm UTC](https://forum.ionicframework.com/t/ionic3-dynamic-supertabs-possible-or-not/132626/10 "2021-07-19T21:32:26Z")

</div>

Closed on July 19, 2021, 9:32pm UTC