Ionic3 dynamic supertabs possible or not?

Ionic Framework ionic-v3
1

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

2

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

3

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.

4

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

<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

5

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

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

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

7

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?

8

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.

9

hi@anna_liebt
Thanks for your suggestion