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.

Config property Default iOS Value Default MD Value
activator highlight ripple
actionSheetEnter action-sheet-slide-in action-sheet-md-slide-in
actionSheetLeave action-sheet-slide-out action-sheet-md-slide-out
alertEnter alert-pop-in alert-md-pop-in
alertLeave alert-pop-out alert-md-pop-out
backButtonText Back
backButtonIcon ion-ios-arrow-back ion-md-arrow-back
iconMode ios md
menuType reveal overlay
modalEnter modal-slide-in modal-md-slide-in
modalLeave modal-slide-out modal-md-slide-out
pageTransition ios-transition md-transition
pageTransitionDelay 16 120
tabbarPlacement bottom top
tabbarHighlight top
tabbarLayout
tabSubPages true

Instance Members

get(key, fallbackValue)

Returns a single config value, given a key.

Param Type Details
key string

the key for the config value

fallbackValue any

a fallback value to use when the config value was not found, or is config value is null. Fallback value defaults to null.

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".

Param Type Details
key string

the key for the config value

fallbackValue boolean

a fallback value to use when the config value was null. Fallback value defaults to false.

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.

Param Type Details
key string

the key for the config value

fallbackValue number

a fallback value to use when the config value turned out to be NaN. Fallback value defaults to NaN.

set(platform, key, value)

Sets a single config value.

Param Type Details
platform string

The platform (either 'ios' or 'android') that the config value should apply to. Leaving this blank will apply the config value to all platforms.

key string

The key used to look up the value at a later point in time.

value string

The config value being stored.

API

Native

General