[Noob Question] ion-buttons and ion-tabs issue

Ionic Framework
1

Hello, I’m new to ionic and slowly learning. Below is some code I have and the ion-button does not work. But if I take out ion-tabs, it works fine. Any idea what I’m doing wrong?

<ion-header>
  <ion-toolbar>
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item >
          <ion-label position="floating">E-mail</ion-label>
          <ion-input></ion-input>
        </ion-item>
        <ion-item>
          <ion-label position="floating">Password</ion-label>
          <ion-input type="password"></ion-input>
        </ion-item>
        <ion-button color="primary" expand="block" fill="clear" [routerLink]="['/', 'registration']">Register</ion-button>
        <ion-button color="primary" expand="block" >Login</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button [routerLink]="['/', 'games']">
        <ion-icon name="american-football"></ion-icon>
        <ion-label>Games</ion-label>
        <ion-badge></ion-badge>
      </ion-tab-button>
  
      <ion-tab-button [routerLink]="['/', 'teams']">
        <ion-icon name="school"></ion-icon>
        <ion-label>Teams</ion-label>
      </ion-tab-button>
  
      <ion-tab-button [routerLink]="['/', 'ranks']">
        <ion-icon name="ribbon"></ion-icon>
        <ion-label>Ranks</ion-label>
      </ion-tab-button>
  
      <ion-tab-button [routerLink]="['/', 'login']">
        <ion-icon name="log-in"></ion-icon>
        <ion-label>Login</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>
2

I think

<ion-tab-button [routerLink]="[’/’, ‘login’]">

will not work.
You have to mention router details in app-routing.modules.ts and declare tabs then it will work.
.html

<ion-content  padding>
    <ion-tabs>
        <ion-tab-bar slot="bottom">

            <ion-tab-button tab="tab1">
                <ion-icon name="document"></ion-icon>
            </ion-tab-button>

            <ion-tab-button tab="tab2">
                <ion-icon name="document"></ion-icon>
            </ion-tab-button>

            <ion-tab-button tab="tab3">
                <ion-icon name="document"></ion-icon>
            </ion-tab-button>
      
    
        </ion-tab-bar>
    </ion-tabs>

app-routing.modules.ts

{ path: ‘pathname’, component: ComponentName, children:
  
    [
      {
        path: 'tab1',
        component: Component1,
      },
      {
        path: 'tab2',
        component: Component2,
      },
      {
        path: 'tab3',
        component: Component3,
       
      },
       {
        path: '',
        redirectTo: 'tabs/tab1',
        pathMatch: 'full'
      }
    ]
}

Let me know if it works

3

ion-tab-button works fine, it’s ion-button that doesn’t work. Neither of the lines below work.

 <ion-button color="primary" expand="block" fill="clear" [routerLink]="['/', 'registration']">Register</ion-button>
 <ion-button color="primary" expand="block" fill="clear" href="/registration">Register</ion-button>