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

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