question：use *ngFor to dynamic generated tab? about ionic-super-tabs

[ihadeed]

@dicallc

For optimization purposes the plugin only checks for the available tabs on initialization. I will try to support this in the future but it's not a priority.

For now, what you can do is prevent the component from initializing until you have your tabs ready. Here's a quick example:

<super-tabs *ngIf="tabsLoaded" ...>
  <super-tab *ngFor="let tab of tabs" ...></super-tab
</super-tabs>

ionViewDidLoad() {
  this.lookservice.getAllcategory().subscribe(countries => {
    this.obj_CategorysListData = countries;
    this.tabsLoaded = true;
  });
}

This will only render your super-tabs component when the data is ready.

[yanxiaodi]

@Topiya , as @ihadeed said, you should not initiate the tabs before getting the data. First, use *ngIf="tabsLoaded" to indicate the data status. Then bind a variable to the tab as a param like this:

<super-tabs scrollTabs="true" *ngIf="tabsLoaded">
        <super-tab *ngFor="let item of countries" [root]="countryPage" [rootParams]="item.country_id" [title]="item.Name"></super-tab>
    </super-tabs>

Now you can get the param in the constructor method of the countryPage. Notice that the param must be a string. I don't think it can recieve an object as a param.

[Topiya]

@ihadeed
Tried with the above code and implemented in HTML

 <super-tabs scrollTabs="true" *ngIf="tabsLoaded">
            <super-tab  *ngFor="let tab of tabs" [root]="tab.countryName" [title]="tab.countryName"></super-tab>
 </super-tabs>

But getting a below error

Runtime Error
Uncaught (in promise): invalid link: Tabname

Can you guide me to solve this?

[ihadeed]

Show me the code that contains "Tabname" in it. Can't tell what the issue is from the code you provided.

I see that you're setting the root and the title both to tab.countryName. Is that string a valid page that the lazy loader is able to fetch?

[Topiya]

@ihadeed
Thank you for your reply.

[root]="tab.countryName" where countryName column name gives a list of countries(Canada,Australia) for example "Australia", so I have declared a variable Australia = AustraliaPage which is pointing to a AustraliaPage
Code:
ts

import { AustraliaPage } from './australia';
import {CanadaPage} from './canada';

export class CountryPage {

Australia = AustraliaPage; 
Canada= CanadaPage;
tabsLoaded = false;

  ionViewDidLoad() {
    this.testservice.getCoutrynames().subscribe(countries => {
        this.tabs = countries;
          // below is the output data of getCoutrynames() method
          //      "countries": [
          //           {
          //           "country_id": 1,
          //           "countryName": "Canada"
          //           },
          //           {
          //           "country_id": 2,
          //           "countryName": "Australia"
          //           }
          //   ]
        this.tabsLoaded = true;
      })
  }
}

HTML

 <super-tabs scrollTabs="true" *ngIf="tabsLoaded">
            <super-tab  *ngFor="let tab of tabs" [root]="tab.countryName"  title="tab.countryName"></super-tab>
 </super-tabs>

Error

Runtime Error
Uncaught (in promise): invalid link: Australia

[Topiya]

@ihadeed
Is there any solution regards to the above comment?

[ihadeed]

@Topiya the way you have it doesn't work.

You need to add a map variable as follows:

let pages: any = {
  Australia: AustraliaPage,
  Canada: CanadaPage
};

Then instead of passing tab.countryName to the root input, you pass pages[tab.countryName].

[Topiya]

@ihadeed
Thanks a lot for your solution. It worked for me!!

[yanxiaodi]

Perfect! Thanks, @ihadeed

[Topiya]

In concern with my above question, I am using countryPage as rootpage for all tabs as mentioned below and fetching data dynamically in countryPage as per the country. This thing I am able to do when declaring pages array as static.

pages: any={
Australia = countryPage;,
Canada= countryPage
}

But when I am trying to fill pages array dynamically as mentioned below, I am getting an error.

this.testservice.getCoutrynames().subscribe(countries => {
        this.tabs = countries;
        for (let i = 0; i < this.tabs.length; i++) {
          this.tabname = this.tabs[i].countryName;
          this.pages = {
            [this.tabname]  : countryPage
          }

Error:

Runtime Error
Uncaught (in promise): invalid views to insert

Can anyone help me get the data dynamically?

[Topiya]

@yanxiaodi Thanks for the solution.