Unable to style the active tab in ionic4 angular

Ionic Framework
1

Hi Everyone,

I’m using ionic v4 to create my first angular project.
The version of the @ionic/angular I use is 4.0.0-rc.0.

I tried to customize the style of my active tab by providing a custom color to it and also a border for its bottom edge. But I couldn’t get it working.
I tried adding the CSS variable --color-selected. but it only changes the color of the label when I hover on it. not after it has been selected.

 <ion-tabs #tabs> 
        <ion-tab-bar slot="top">
            <ion-tab-button tab="subcateg/All">
                    <ion-label>All</ion-label>
            </ion-tab-button>
    
            <ion-tab-button *ngFor="let subCateg of category.subcategories" tab="subcateg/{{subCateg}}">
                <ion-label>{{subCateg}}</ion-label>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>

Also, I have to dynamically call a tabs.select(‘subCateg/All’) from ngAfterViewInit in my typescript file to make the first tab to appear.

whereas if I create a default project ionic start tabs-issue tabs --type=angular, the selected tab is highlighted by displaying the ion-label in the color specified in --color-selected.

I do not see much difference between my approach and the one in the default boilerplate code.

Can anyone point me in the right direction?? How to set a CSS style to the activeTab in the ion-tabs.

P.S: if I manually specify a selectedTab attribute to the ion-tab-bar element, that specific tab takes up the color defined in the --color-selected variable.

2

okay. The root cause of the problem is when I use the dynamic id in the router for the tab

const routes: Routes = [
  {
    path: '',
    component: ProductsPage,
    children: [
      {
        path: 'subcateg/:subCateg',
        loadChildren: './filtered-products.module#FilteredProductsPageModule'
      }
    ]
  }
];

I was able to reproduce the same problem in the tab navigation boilerplate code as well.

Can anyone help me with a workaround or solution to this problem and to add a custom selection color and a bottom border for the active tab?

1 Like
3

Any update on figuring this out?