When I select my ionic tab with a dynamic url, the tab doesn’t highlight

Question

So my ion tab is as follows (tabs.page.html, and I set user_id in the tabs.page.ts file in the same folder, and that doesn't seem to be the issue):

<ion-tabs>

  <ion-tab-bar slot="bottom">

    ...

    <ion-tab-button tab=“profile/{{user_id}}”>
      <ion-icon name=“person”></ion-icon>
    </ion-tab-button>

    ...

  </ion-tab-bar>

</ion-tabs>

And it connects to the following router code (in tabs.router.module.ts):

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
        ...,
        {
          path: ‘profile/:id’,
          children: [
            {
              path: ‘’,
              loadchildren: ‘../profile/profile.module#ProfilePageModule’
            }
          ]
        },
        ...
  }
];

However, the tab doesn’t remain highlighted after I click it. Everything else works, and when I hover over the tab it lights up, and when I click it there is the proper flash of color and the page loads properly; however, the tab icon doesn’t stay highlighted once it loads after I’ve clicked on it (the profile tab). Any ideas?

Answer 1

Ionic adds tab-selected class to selected ion-tab-button, by default you should see a styling for .host(.tab-selected) set with color attribute, which changes the color. Check your developr console and see what's not working.

You can also trying setting your custom styling and to ensure nothing else in your code is overriding it.

ion-tab-button.tab-selected {
  color: var(--ion-color-secondary) !important;
  background: var(--ion-color-primary) !important;
}