ionic5 code snippet: Add the Tab to the TabBar at the bottom of the APP

Author:neo yang Time:2020/04/18 Read: 5740

---

Using ionic5 and angular8.

There are two pages.

Tabs page: There are only TabBars in the page. There are three tabs tab1, tab2, and tab3.

Videos page: Created a new videos page and prepared to put it into the TabBar.

1. In tabs.page.html

Add tab.

<ion-tabs>
  <ion-tab-bar slot="bottom"> 
    ...
    <ion-tab-button tab="videos">
    <ion-icon name="videocam"></ion-icon>
    video
    </ion-tab-button>
    ...
  </ion-tab-bar>
</ion-tabs>

Highlight:tab=”videos”.

2. in app-routing-modules-ts

Delete or comment out the route of the videos page.

const routes: Routes = [
   ...
   /*{ path: 'videos', loadChildren: () => import('./videos/videos.module').then( m => m.VideosPageModule) },*/
   ...
 ];

3. tabs-routing-modules-ts

Add a sub-route to the videos page.

const routes: Routes = [
   {
     path: 'tabs',
     component: TabsPage,
     children: [
       .........
       {
         path: 'videos',
         children: [
           {
             path: '',
             loadChildren: () =>
               import('../videos/videos.module').then(m => m.VideosPageModule)
           }
         ]
       },
      .........

     ]
   },
   .........
 ];