Multi Tabs ionic2

Question

i have an ionic2 app and i want to display an ion-tabs with multiple ion-tab from an array. This array i want to populate with a generic tab and pass it an array.

I have this component <multi-tab></multi-tab>:

<ion-tabs tabsPlacement="top" class="multi-tabs">
  <ion-tab *ngFor="let tab of tabs" [tabTitle]="tab.title" [root]="tab.component"></ion-tab>
</ion-tabs>

And this is the ts file:

[some imports here]
export class Tab {
    title: string;
    component: any;
};

const tabs = [{title: 'Snacks',  component: Snacks},
              {title: 'Drinks',  component: Drinks},
              {title: 'Frozen',  component: Frozen},
              {title: 'Custom',  component: customTab}];

@Component({
  selector: 'multi-tab',
  templateUrl: 'multitab.html'
})
export class multiTab {

  tabs : Array<Tab>;
  constructor(public modalCtrl: ModalController) {
      this.tabs = tabs;
  }
}

This is my custom tab component:

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of items">
      <h2>{{item.title}}</h2>
      <p>Quantity: {{item.units}}</p>
      <ion-icon name="trash" item-right color="indigo100" (click)="onDelete(item)"></ion-icon>
    </ion-item>
  </ion-list>
  <ion-fab center bottom>
     <button ion-fab mini color="pink200" (click)="onAdd()"><ion-icon name="add"></ion-icon></button>
  </ion-fab>
</ion-content>

And this the ts file:

[some imports]
const CustomItems = [{
  'title': 'custom',
  'units': 1
}];

@Component({
  templateUrl: 'customTab.html'
})
export class customTab {

  items : Array<Item>;

  constructor(public modalCtrl: ModalController) {
    this.items = CustomItems;
  }

[some methods]

I want to use in all tabs the customTab and give it an array to initialize (the items array property) But the closest I've ever been is having this error:

Can't resolve all parameters for customTab(?)

when i tried:

constructor(public aux: Array<Item>) {
  this.items = aux;
}

nhpatt nhpatt · Accepted Answer · 2016-11-24T18:27:50

There are 2 options, either use the property rootParams (explained in depth here for example) or create a service that is injected in both components.

Both solutions have their merits, the first one is using the mechanism introduced explicitly for that purpose because ion-tabs are custom components and you can't use inputs and outputs. The second solution is the main mechanism of sharing data in angular applications (like a user session) but can seem as overkill for this small task.

There is an example of using rootParams in this commit.

Multi Tabs ionic2

1 Answers