ion-tabs prevent me from interacting with the page

Issue

I have a ionic page where I have a button and a component included. Including the component (tabs) prevent me from interacting with the button because it creates a layer on top of it.

I cannot find a way to import my component properly so I'm looking for advise. Many thanks.

My settings.html

 <ion-header [translucent]="true">
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>
            Paramètres
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <app-auth-form *ngIf="isRegistered == false" (formSubmitted)="link($event)"[actionButtonText]="'S\'enregistrer'"></app-auth-form>
    <ion-button expand="block">
        test
    </ion-button>

</ion-content>

<app-bottom-menu #bottomMenuComponent></app-bottom-menu>

Of course I have added in settings.ts :

  @ViewChild(AuthFormComponent) loginForm: AuthFormComponent;

I have both FormsModule and ReactiveFormsModule in my settings.module.ts.

Here is my component :

    <ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button (click)="this.navCtrl.navigateRoot('/home')">
      <ion-icon name="star"></ion-icon>
      <ion-label>Abonnements</ion-label>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

    <ion-tab-button (click)="this.navCtrl.navigateForward('/discover')">
      <ion-icon name="eye"></ion-icon>
      <ion-label>Découvrir</ion-label>
    </ion-tab-button>

    <ion-tab-button (click)="this.navCtrl.navigateRoot('/settings')">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Paramètres</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

I'm still new to ionic, so if you think my way of importing stuff / coding the page (ion-content and attributes) is not good. I will be glad to be advised.

Thank you.

Solution

While messing around with CSS trying to modify the ion-tabs in order to prevent it from making me impossible to click on the page, I was able to solve this issue doing that :

In app.component.html

<ion-app>
    <ion-router-outlet></ion-router-outlet>
</ion-app>
<app-bottom-menu #bottomMenuComponent></app-bottom-menu>

In app.module.ts

  declarations: [AppComponent, BottomMenuComponent],

I didn't know why it doesn't worked before. I found the answer without searching it. Maybe it will help some others.

Answered By - Max