Issues with tabs

Ionic Framework Ionic Angular
1

Hi, I’m new to using Ionic, and haven’t really used Angular before, I have some backend help but I need some frontend help, I have been trying for days to get this tabs system to work however, it doesn’t seem to work, I made an alternative by adding this after the ionic-content tag on each page:

I am using Ionic v5 - Angular

<ion-tab-button (click)="gotoMatches()">

  <ion-icon name="people-circle" color="danger"></ion-icon>

  <ion-label>Matches</ion-label>

</ion-tab-button>

<ion-tab-button tab="usermessages">

  <ion-icon name="chatbox-ellipses"></ion-icon>

  <ion-label>Messages</ion-label>

  <ion-badge color="danger">6</ion-badge>

</ion-tab-button>

<ion-tab-button tab="map">

  <ion-icon name="options"></ion-icon>

  <ion-label>Filter</ion-label>

</ion-tab-button>

<ion-tab-button tab="about">

  <ion-icon name="person-circle"></ion-icon>

  <ion-label>My Account</ion-label>

</ion-tab-button>

To redirect, I am using a function which is goToMatches() and it works, however now my scrolling has been blocked and wont scroll at all and I have no idea on how to rectify it, I have also tried to do it the normal way with routing ect however it doesn’t ever seem to work, thank you for taking your time to read this,

My Ionic Info is:
Ionic:

   Ionic CLI                     : 6.5.0 (C:\Users\nadzg\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.0
   @capacitor/core : 2.0.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.13.4
   OS     : Windows 10

Kind Regards
Nadz

2

I think what you’re doing by using a click event to navigate is breaking the prebuilt library for tabs. Functions should be used where you’re navigating between non-tab pages if you’re going to have logic involved. If you have logic in gotoMatches( ) I’d recommend doing it like


<ion-tab-button (click)="matches()" tab="matches">

or doing the necessary logic on that tab matches.component.ts when ngOnInit() or ionViewDidEnter() runs.