How to make ion-tabs visible for the sub-pages?

Question

I want the tabs to be present in the entire app but I didn't find any solution to do this in Ionic 4.

Answer 1

As my project is an angular project using Ionic and to have ion-tabs on all the sub-pages of the app has to dealt with angular navigation.

I wanted to show details page with tabs at bottom so I used this approach: Route set in tabs.router.module.ts:

 {
    path: 'tab3',
    children: [
      {
        path: '',
        loadChildren: '../tab3/tab3.module#Tab3PageModule'
      },
      {
        path: 'details',
        children: [
          {
            path: '',
            loadChildren: '../details/details.module#DetailsPageModule'
          },
          {
            path: 'insideDetails',
            loadChildren: '../inside-detail/inside-detail.module#InsideDetailPageModule'
          }
        ]
      }
    ]
  }

So now the details page and Inside-details page will have tabs at bottom. The url for details page is tabs/tab3/details.

tab3.page.html

<ion-content>

  <ion-button (click)='openDetailsInTab()'>Open Details with tab bar</ion-button>  

</ion-content>

tab3.page.ts

export class Tab3Page {
  constructor(public app: IonApp,
    private router: Router) { }

    openDetailsInTab() {
        this.router.navigateByUrl('/tabs/tab3/details');
    }

}

Use angular router navigateByUrl method to route to that details page.