Super Tabs - how to pass page to [root] correctly?

[lonewolf-73]

Hello everyone!

I am trying to make an Ionic Capacitor app with Angular ( ionic installed is 5.6.13 with Capacitor on 14.17.5 nodejs’s LTS version ) where I am trying to load external pages in super-tabs-container by routing with *ngFor so my home.page.ts is :

import { SuperTabs } from '@ionic-super-tabs/angular';
import { ProductsPage } from '../products/products.page';
import { SettingsPage } from '../settings/settings.page';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  tabsLoaded:boolean = false;
  pageProducts = ProductsPage;
  pageSettings = SettingsPage;

  tabs = [
    { pageName: ProductsPage, title: 'Products', icon: 'Home', id: 'productsPage'},
    { pageName: SettingsPage, title: 'Settings', icon: 'Settings', id: 'settingsPage'}
  ];   

  selectedTabIndex = 0;

  @ViewChild(SuperTabs) superTabs: SuperTabs;

  constructor() {}

   onTabSelect(ev: any) {
    this.selectedTabIndex = ev.index;
  } 

  ngOnInit() {
    console.log('ngOnInit HomePage');
    this.tabsLoaded = true;
  } 

}   

and my home.page.html is :

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>Products</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>  

    <super-tabs tabsPlacement="top">
    <super-tabs-toolbar slot="top">
      <super-tab-button *ngFor="let tab of tabs">
        <ion-icon name="{{tab.icon}}"></ion-icon>
        <ion-label>{{tab.title}}</ion-label>
      </super-tab-button>
    </super-tabs-toolbar>
    <super-tabs-container>
      <super-tab *ngFor="let tab of tabs">
        <ion-nav [root]="tab.pageName" title="{{tab.title}}" [rootParams]="tab"></ion-nav>
      </super-tab>
    </super-tabs-container>
    </super-tabs>

</ion-content>

It appears the super tabs toolbar and I can swipe tabs but seems it doesn’t load the external page into each tab container… I tried also to call {{page.pageName}} removing from root attribute but it doesn’t work… at least that [root] attribute is right for loading contents into tab… Any little help would be appreciated… thanks in advance to all!!

Cheers! :slightly_smiling_face:

[lonewolf-73]

At the end I decided to implement as single tabs like :

<super-tabs tabsPlacement="top">
<super-tabs-toolbar slot="top">
  <super-tab-button *ngFor="let tab of tabs">
    <ion-icon name="{{tab.icon}}"></ion-icon>
    <ion-label>{{tab.title}}</ion-label>
  </super-tab-button>
</super-tabs-toolbar>
<super-tabs-container autoScrollTop>
  <super-tab>
    <ion-nav [root]="pageProducts"></ion-nav>
  </super-tab>
  <super-tab>
    <ion-nav [root]="pageSettings"></ion-nav>
  </super-tab>
</super-tabs-container>
</super-tabs>

in this way it works but I’d know anyway if there is a trick to use °ngFor also for super-tabs-container… Thanks Cheers!