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.

@App({
  template: `<ion-nav [root]="root"></ion-nav>`
  config: {
    backButtonText: 'Go Back',
    iconMode: 'ios',
    modalEnter: 'modal-slide-in',
    modalLeave: 'modal-slide-out',
    tabbarPlacement: 'bottom',
    pageTransition: 'ios',
  }
})

To change the mode to always use Material Design (md).

@App({
  template: `<ion-nav [root]="root"></ion-nav>`
  config: {
    mode: 'md'
  }
})

Config can be overwritten at multiple levels allowing for more configuration. Taking the example from earlier, we can override any setting we want based on a platform.

@App({
  template: `<ion-nav [root]="root"></ion-nav>`
  config: {
    tabbarPlacement: 'bottom',
    platforms: {
     ios: {
       tabbarPlacement: 'top',
     }
    }
  }
})

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

<ion-tabs tabbarPlacement="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/?ionicTabbarPlacement=bottom

Custom values can be added to config, and looked up at a later point in time.

config.set('ios', 'favoriteColor', 'green');
// from any page in your app:
config.get('favoriteColor'); // 'green'

A config value can come from anywhere and be anything, but there are a default set of values.

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.