Ionic 4 - How to create tabs layout with tab button and its content on one single page

Question

I have to create a page with tabs layout, wherein, the page will contain the tab bar button which will bind dynamically. Also I require to show the body content, which will however also be dynamically binded

I have tried with the below given code. But there arises an error showing "'ion-tab' is not a known element: 1. If 'ion-tab' is an Angular component, then verify that it is part of this module. 2. If 'ion-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message."

 <ion-tabs *ngIf="tabList">
    <ion-tab *ngFor="let t of tabList">
        <ion-header translucent>
            <ion-toolbar>
                <ion-title>{{ t.name }}</ion-title>
            </ion-toolbar>
        </ion-header>    
        <ion-content fullscreen class="ion-padding">
            <h1>{{ t.name }}</h1>
        </ion-content>
    </ion-tab>
    <ion-tab-bar slot="top">
        <ion-tab-button *ngFor="let t of tabList" [tab]="t.name">
            <ion-label>{{ t.name }}</ion-label>
            <ion-icon name="musical-note"></ion-icon>
        </ion-tab-button>
    </ion-tab-bar>        
</ion-tabs>

Answer 1

Well, use segment like this:

Solution - 1

page.ts

import { ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';
.....
@ViewChild('slider') slider: IonSlides;
.....
selectedTab(index: number) {
   this.slider.slideTo(index);
}

async moveButton() {
   let index = await this.slider.getActiveIndex();
   this.page = index.toString();
   console.log("0")
}

segmentChanged(ev: any) {
   console.log('Segment changed', ev);
}

page.html

<ion-row>
    <ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="page">
      <ion-segment-button value="0" (click)="selectedTab(0)">
        <ion-label>Tab1</ion-label>
      </ion-segment-button>
      <ion-segment-button value="1" (click)="selectedTab(1)">
        <ion-label>Tab2</ion-label>
      </ion-segment-button>
      <ion-segment-button value="2" (click)="selectedTab(2)">
        <ion-label>Tab3</ion-label>
      </ion-segment-button>
      <ion-segment-button value="3" (click)="selectedTab(3)">
        <ion-label>Tab4</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-row>

  <ion-slides #slider (ionSlideWillChange)="moveButton()">
    <ion-slide>
      <h1>Tab1</h1>
    </ion-slide>
    <ion-slide>
      <h1>Tab2</h1>
    </ion-slide>
    <ion-slide>
      <h1>Tab3</h1>
    </ion-slide>
    <ion-slide>
      <h1>Tab4</h1>
    </ion-slide>
  </ion-slides>

Solution - 2

Also, you can do this. This example in ionic 3 but we can make for ionic 4 too.

sliding segments

Hope it help you :)

Answer 2

Home.html

<ion-tabs>
<ion-tab-bar slot="bottom">
  <ion-tab-button tab="tab1">\\ tab1 Your page name
    <ion-icon name="calendar"></ion-icon>
    <ion-label>Schedule</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="tab2">\\ tab2 Your page name
    <ion-icon name="contacts"></ion-icon>
    <ion-label>Speakers</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="tab3">\\ tab3 Your page name
    <ion-icon name="map"></ion-icon>
    <ion-label>Map</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="tab4"> \\ tab4 Your page name
    <ion-icon name="information-circle"></ion-icon>
    <ion-label>About</ion-label>
  </ion-tab-button>
</ion-tab-bar>

Home.module.ts

 const routes: Routes = [

{
path: 'home',
component: HomePage,
children: [
  {
    path: 'tab1',
    loadChildren: '../tab1/tab1.module#Tab1PageModule'
  },
  {
    path: '',
    redirectTo: 'home/tab1',\\default redirect to page
    pathMatch: 'full'
  }
]
 }
];

Answer 3

1. Go to your app.module.ts
2. Add schemas: [ CUSTOM_ELEMENTS_SCHEMA ] after imports[] array

Example:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],

  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})

Hope this solves your issue. Thanks