Different text and icon for tabs in ionic

Appflow
1

I want to have different text and icon for ion-tab , something like this :
if platform is android: <ion-tab [root]=“tab3Root” tabTitle=android_title tabIcon=“information-circle”>
if platform is ios: <ion-tab [root]=“tab3Root” tabTitle=ios_title tabIcon=“information-circle”>

how can I implement ?

2

HI, @pegahmojab

Try below Code:

tab.ts

import { Component } from '@angular/core';
import { Platform } 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 {
  tabArray=[];
  tabArrayAndroid=[{
    name:'Home',
    tabIcon:'home',
    root:HomePage
  },{
    name:'About',
    tabIcon:'information-circle',
    root:AboutPage
  }];
  tabArrayIos=[{
    name:'Lock',
    tabIcon:'lock',
    root:HomePage
  },{
    name:'Alarm',
    tabIcon:'alarm',
    root:AboutPage
  }];
  constructor(public plt: Platform) {
    console.log(  this.tabArray)
    if (this.plt.is('ios')) {
      console.log("IOS");
      this.tabArray=this.tabArrayIos;
    }
    if (this.plt.is('android')) {
      console.log("Android");
      this.tabArray=this.tabArrayAndroid;
    }else{
    }
  }
}

tab.html}


<ion-tabs >
    <ion-tab *ngFor="let item of tabArray" [root]="item.root" [tabTitle]="item.name" [tabIcon]="item.tabIcon"></ion-tab>
</ion-tabs>

Hope this will resole your issue

Thanks,

1 Like
3

Hi, @pegahmojab
If your issue was resolved mark a solution.
thanks