Tab-bar position ionic v4


I have a problem with ionic version 4.rc-0 and tab-bar position.
Every thing is correctly displayed when you add directly or

But if you want to be dynamic like :
<ion-tab-bar [slot]=“tabplacement”>
(tabplacement is changed in the constructor)
it always display the tab bar at the bottom.

I tested it with the tab starter in ionic cli.

Any idea to correct this ?

Thank you !

The docs used to mention that the slot value must always be bottom. You position the <ion-tabs> element instead.

1 Like

Thank you, you solved my issue ! :slight_smile:

My ugly workaround:


  <ion-tab-bar slot="bottom" color="primary" *ngIf="'mobile')">
    <ion-tab-button tab="home" layout="icon-start">
      <ion-icon name="home"></ion-icon>
      <ion-label>{{ 'HOME' | translate }}</ion-label>

  <ion-tab-bar slot="top" color="primary" *ngIf="'desktop')">
    <ion-tab-button tab="home" layout="icon-start">
      <ion-icon name="home"></ion-icon>
      <ion-label>{{ 'HOME' | translate }}</ion-label>

1 Like

^ This is the route I had to take as well

In the version we use (4.0.0.rc1) the slot=“top” works, but moves the tabbar in the top of the whole page and not under the header just like in v3. Is there any workaround for this?

i have the <ion-header> in the and removed from all of the tab child pages, with <ion-title> set to change with the ion-tabs (ionTabsDidChange) event calling the getSelected() method. I also set up my <ion-tab-button>s dynamically

        <ion-title>{{ pageTitle }}</ion-title>
<ion-tabs #tabs (ionTabsDidChange)="setTitle()">

public tabsList: any[] = [{
    name: 'tab1',
    label: 'Tab One',
    icon: 'home'
    }, {
    name: 'tab2',
    label: 'Tab Two',
    icon: 'apps'
    }, {
    name: 'tab3',
    label: 'Tab Three',
    icon: 'send'

public tabs: IonTabs;

constructor(private route: ActivatedRoute) {}

setTitle() {
    const currentTab: string = this.tabs.getSelected();
    const matchingTab: string = this.tabsList.filter((tab: any) => === currentTab)[0]; //uses the first array element as the currentTab
    this.pageTitle = matchingTab.label;