(IONIC 4) ion-tab-button do not change color when clicked/selected

Question

I have an ion-tab with differents ways to redirect: By Routes at the tabs.module.ts and by [routerLink] in html.

The problem is: when the ion-tab-buttons are clicked, they navigate to other pages correctly but the color only change when using Routes and "loadchildren" routing.

using CSS:

ion-tab-button {
 --color-selected: var(--ion-color-text-secondary);
}

I tried to use loadChildren routing in all tabs but some tabs are to redirect to a component and was not successful. I also tried to use pseudo-classes in CSS like

ion-tab-button:active {
    color: blue;
}

ACTUAL FILES:

tabs.page.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <i class="fal fa-home-alt fa-2x"></i>
    </ion-tab-button>

    <ion-tab-button [routerLink]="['/tabs/home/feed/feed-user/' + id]">
      <i class="fal fa-user-circle fa-2x"></i>
    </ion-tab-button>

    <ion-tab-button [routerLink]="['/tabs/home/trade-room']">
      <i class="fal fa-comments-alt-dollar fa-2x"></i>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

tabs.module.ts

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
     {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
     },
      {
        path: 'home',
        loadChildren: '../home/home.module#HomePageModule'
      },
    ]
  }
];

I need some way to change the color button when they are clicked

Answer 1

I'm not sure this is exactly what you are looking for but maybe you can use some form of this idea to solve your problem.

You can subscribe to the router events in tabs.page.ts and evaluate the url and apply css if the url matches one of the redirects.

tabs.page.ts

import { Component } from '@angular/core';
import { Router, RouterEvent } from '@angular/router';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {

  selectedPath = '';

  constructor(private router:Router) { 
    this.router.events.subscribe((event: RouterEvent) => {
      if(event && event.url){
        this.selectedPath = event.url;
      }
    });
  }
}

tabs.page.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <i class="fal fa-home-alt fa-2x"></i>
    </ion-tab-button>

    <ion-tab-button [routerLink]="['/tabs/home/feed/feed-user/' + id]" [class.active-item]="selectedPath.includes('feed')">
      <i class="fal fa-user-circle fa-2x"></i>
    </ion-tab-button>

    <ion-tab-button [routerLink]="['/tabs/home/trade-room']" [class.active-item]="selectedPath.includes('trade')">
      <i class="fal fa-comments-alt-dollar fa-2x"></i>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

tabs.page.scss

.active-item {
  color: red;
}

This will not affect the existing behavior of the tabs defined in tabs.module.ts. You will probably have to write a bit more to manage the css of those tabs.

I came across this pattern here by Simon Grimm. He has some really great tutorials.

Hope this helps