CODEWITHSUNDEEP
typescripttabsionic2
Rohit Vinay
Rohit Vinay

Reputation: 663

Dynamic ion-tabs in ionic 2 using ngFor

I am using ionic 2 for my application, i want to get dynamic tabs in my application, i am not able to get that

HTML

<ion-tabs #mainTabs [selectedIndex]="mySelectedIndex">
  <ion-tab *ngFor="let circle of circles" [tabRoot]="gotoMemberListPage(circle)" title="{{circle.name}}"></ion-tab>\
</ion-tabs>

Typescript

gotoMemberListPage(circle) {
 this.navCtrl.push(MemberListPage, circle);
}

Upvotes: 0

Views: 2369

Answers (1)

Sai
Sai

Reputation: 311

I don't know whether it will help full to you or not by following below snippet you can pass Dynamic Tabs using Ionic 2 and typescript

tabs.html

<ion-tabs>
 <ion-tab *ngFor="let tab of tabs" [root]="tab.root" [tabTitle]="tab.title" 
  [tabIcon]="tab.icon"></ion-tab>
</ion-tabs>

tabs.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
 templateUrl: 'tabs.html'
})
export class TabsPage {
public tabs;
public navCtrl: NavController
constructor() {
this.tabs = [
  { title: "Home", root: HomePage, icon: "home" },
  { title: "About", root: AboutPage, icon: "information-circle" },
  { title: "Contact", root: ContactPage, icon: "contacts" }
];

}
}

Upvotes: 1

Related Questions