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! 🙂

[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!