How to dynamically change the color of ion-tabs

Ionic Framework ionic-v3
1

Hi, I like to know how to change the color of the ion-tab only in the active state.By using the color code from the JSON response.

2

<ion-tabs [color]="jsonColorField ? 'jsonColorField' : 'defaultColor'">

If not what you need, kindly elaborate the question…

3

Thank for the reply.

<ion-tabs>
    <ion-tab tabIcon="contact" [root]="tab1"></ion-tab>
    <ion-tab tabIcon="compass" [root]="tab2"></ion-tab>
    <ion-tab tabIcon="analytics" [root]="tab3"></ion-tab>
    <ion-tab tabIcon="settings" [root]="tab4"></ion-tab>
  </ion-tabs>

I want to change the active state color of the tabIcon. I can change the active state Icon color using .tabs-ios .tab-button[aria-selected=true]{ color: #fff}. But I want to change the color dynamically from the JSON response.

4

Did you try the above ? You’ll just need to make sure that you map the right json field to the color attr.

5

I tried the solution

<ion-tabs id="tabsBar" [color]="1==0 ? themecolour : defaultColor">
but I gets the ion-tab like this
<ion-tabs id="tabsBar" class="tabs tabs-ios tabs-ios-#ff00ff" tabsplacement="bottom" tabslayout="icon-top" tabshighlight="false"></ion-tabs>