Ionic 4: Tabs with routing doesn't display content

Question

I was using this tutorial https://alligator.io/ionic/ionic-4-tabs/ to create Routing for my Ionic Tabs, but unfortunately the displayed content is always hidden and can't be shown.

My home.page.html looks like this:

<ion-header>
  <ion-tabs style="display: contents;">

  <ion-tab-bar slot="top">

    <ion-tab-button tab="popular">
      <ion-label>SOme text</ion-label>
      <ion-icon name="heart"></ion-icon>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>
</ion-header>

I defined the routings inside a home-routing.module.ts:

const routes: Routes = [
    {
        path: 'tabs',
        component: HomePage,
        children:
            [
                {
                    path: 'popular',
                    children:
                        [
                            {
                                path: '',
                                loadChildren: '../popular/popular.module#PopularPageModule'
                            }
                        ]
                }
           ]
     }
]

And my popular.page.module.html looks like this:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
<h1>Hallo</h1>
</ion-content>

I excpected so the h1-Tag "Hallo", but unfortunately it doesn't show anything. The interesting thing indeed, is that the h1-Tag is shown in Developer-Tools in the Browser.

Any ideas?

Edit: I found out that the content from the Popular-Tab is always included in the <div class="tabs-inner">- Any ideas why? — AppleForTheKing
– AppleForTheKing, Commented Apr 5, 2019 at 5:53

Ira Watt · Accepted Answer · 2019-04-05 11:13:13Z

0

This has caused me a head headache XD. you shouldnt be putting your tabs in your header. the taps component/element is generated at the level above the page, where as the header element is generated within the page so sticking the tabs in the header is causeing all sorts of crazyness.

I went through the tutorial and got it to display correctly

home.page.html -

<ion-tabs>
<ion-tab-bar slot="top" color="primary">
    <ion-tab-button tab="tab1">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

<ion-tab-button tab="tab2">
      <ion-label>SOme text</ion-label>
      <ion-icon name="heart"></ion-icon>
      <ion-badge>6</ion-badge>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

please comment for stuff you want me to add

answered Apr 5, 2019 at 11:13

Ira Watt

2,1552 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AppleForTheKing Over a year ago

LOL, thank you so much. I am completly new to Ionic and Typescripting.

Collectives™ on Stack Overflow

Ionic 4: Tabs with routing doesn't display content

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related