Config

Improve this doc

The Config lets you configure your entire app or specific platforms. You can set the tab placement, icon mode, animations, and more here.

import { IonicApp, IonicModule } from 'ionic-angular';

@NgModule({
  declarations: [ MyApp ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
      backButtonText: 'Go Back',
      iconMode: 'ios',
      modalEnter: 'modal-slide-in',
      modalLeave: 'modal-slide-out',
      tabsPlacement: 'bottom',
      pageTransition: 'ios-transition'
    }, {}
  )],
  bootstrap: [IonicApp],
  entryComponents: [ MyApp ],
  providers: []
})

Config can be overwritten at multiple levels allowing for more granular configuration. Below is an example where an app can override any setting we want based on a platform.

import { IonicModule } from 'ionic-angular';

@NgModule({
  ...
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
      tabsPlacement: 'bottom',
      platforms: {
        ios: {
          tabsPlacement: 'top',
        }
      }
    }, {}
  )],
  ...
})

We could also configure these values at a component level. Take tabsPlacement, we can configure this as a property on our ion-tabs.

<ion-tabs tabsPlacement="top">
  <ion-tab tabTitle="Dash" tabIcon="pulse" [root]="tabRoot"></ion-tab>
</ion-tabs>

The last way we could configure is through URL query strings. This is useful for testing while in the browser. Simply add ?ionic<PROPERTYNAME>=<value> to the url.

http://localhost:8100/?ionicTabsPlacement=bottom

Any value can be added to config, and looked up at a later in any component.

config.set('ios', 'favoriteColor', 'green');

// from any page in your app:
config.get('favoriteColor'); // 'green' when iOS

A config value can come from anywhere and be anything, but there are default values for each mode. The theming documentation has a chart of the default mode configuration. The following chart displays each property with a description of what it controls.

Instance Members

get(key, fallbackValue)

Returns a single config value, given a key.

getBoolean(key, fallbackValue)

Same as get(), however always returns a boolean value. If the value from get() is null, then it’ll return the fallbackValue which defaults to false. Otherwise, getBoolean() will return if the config value is truthy or not. It also returns true if the config value was the string value "true".

getNumber(key, fallbackValue)

Same as get(), however always returns a number value. Uses parseFloat() on the value received from get(). If the result from the parse is NaN, then it will return the value passed to fallbackValue. If no fallback value was provided then it’ll default to returning NaN when the result is not a valid number.

set(platform, key, value)

Sets a single config value.