Tabs remain at top of app after adding property tabsPlacement: 'bottom' to app.ts

Short description of the problem:

According to the V2 Config there are three ways to place the tabs at the bottom of your app:

1. Add the tabsPlacement property to ionic bootstrap in app.ts
2. Add the tabsPlacement property to ion-tabs in tabs.html
3. Add a query string http://localhost:8100/?ionicTabsPlacement=bottom

I have done all three and my tabs still remain at the top of my app:

What behavior are you expecting?

I want my ionic tabs to be placed at the bottom of the screen.

Steps to reproduce:

1. Create a new ionic tabs project: ionic start TabsTopBottom tabs --v2
2. Modify app.ts to include the tabsPlacement: “bottom” property
3. Run the app.

app.ts:

import {Component} from '@angular/core';
import {App,Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
})
export class MyApp {

  private rootPage: any;

  constructor(private platform: Platform) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

ionicBootstrap(MyApp, [], {
  tabsPlacement: "bottom"
});

tabs.html:

<ion-tabs tabsPlacement="bottom">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

Other information: It appears to me that the tabplacement and tabbarplacement never change to “bottom”.

Which Ionic Version?

2.0.0-beta.10

Plunker that shows an example of your issue

http://embed.plnkr.co/jCqyxvqJtHV9hPYxsolw/

Run ionic info from terminal/cmd prompt: (paste output below)

[huntmj01]

Thank You Brandy! Once the next release is released I will know to update my code. I didn’t realize you could select which version of ionic to view in the documentation so thank you for that information also.

[brandyscarney]

Yes, as @Manduro said, the beta 10 config option for this is tabbarPlacement. Right now the API docs are using the nightly version which shows our latest changes that haven’t been released. If you select the dropdown in the top left and change it to beta 10 you will see all of the documentation for that release. We have an open issue to change this to the latest stable release: https://github.com/driftyco/ionic-site/issues/692