Search code examples
angularionic-frameworkionic4

Unable to display ion-tab-button as active in ionic 4+

here i am displaying a ionic tabs and in that i am using ion-tab-button like below

<ion-tab-bar slot="bottom">
    <ion-tab-button [routerLink]="['/tabs/tab1']">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>

    <ion-tab-button [routerLink]="['/tabs/tab2']">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

here on tab i am using routerlink which is required for me . after setting that up the tabs are not showing whether which tab icon is active . it is displaying like below

Tab view

Although i am on tab1 it is not displaying it as active

Solution

  • You have missed one thing in your tags i.e tab

     <ion-tab-button tab="somename" [routerLink]="['/tabs/tab1']">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>