Is there any way to create something like an ion-tabs?

Question

I wonder if is there any way to create a custom ion-tabs like structure. I'm new to angular and ionic and trying to do something like ion-tabs. Imagine a toolbar with dynamic buttons which have pre-defined ID's on them. By clicking tab buttons, shown component will change according to the ID of button. I would like to load them after clicking the button so i assume its not lazy-loading. I wonder if i can do that without Refreshing the page. Thanks.

Answer 1

You should attempt to do your own research.

But yes, there is a way, someone has coded ion-tabs anyway. Add a tabs component on the root page, add router links there, and provide the pages in a routing module.

I'm currently building an Ionic app. Here's my navigation in a side menu - you'd just add the router links to a bottom tab bar.

<ion-app>
  <ion-menu #menu side="start" menuId="menu" contentId="content">
    <ion-header>
      <ion-toolbar>
      <ion-title>{{ 'APP.TITLE' | translate }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-item>
          <select (change)="setLanguage($event.target.value)">
            <option value="fi">Suomi</option>
            <option value="en">English</option>
          </select>
        </ion-item>

        <!-- THIS IS THE NAVIGATION -->
        <ion-item *ngFor="let page of pages">
          <ion-button [routerLink]="page.url">{{ page.text | translate }}</ion-button>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <!-- PAGES RENDER HERE -->
  <ion-router-outlet id="content"></ion-router-outlet>
</ion-app>

Here's the router.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'home',
    loadChildren: () => import('./my-observations/my-observations.module').then( m => m.MyObservationsPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }