Configuring your Ionic App

In updating my book, Mobile App Development with Ionic, I was exploring ways to globally set various settings for my Ionic applications. As a general rule, much of the styling of the components are meant to be done at the component level. However, you might have several ion-refresh components scattered throughout your application. Instead of defining that component’s spinner in each instance, you can set that property globally. To set these parameters, we can pass in an object of key-value pairs to the forRoot method on IonicModule. For example:

IonicModule.forRoot( {mode: 'ios', })

in the app.module.ts file.

Here are some of the settings that you might want to adjust for you Ionic 4 application:

mode

This will set the overall platform mode of the app. It can be either ios or md.

statusTap

This boolean will enable the ability to tap the device’s status bar to trigger a scroll to the top of the screen.

backButtonIcon

To set the back button icon that the ion-back-button uses, pass in the ion-icon name or path to the icon.

backButtonText

To set the back button text that the ion-back-button uses.

spinner

If you want to globally set the style of the ion-spinner, you can use this property. Allowable values are “lines”, “lines-small”, “dots”, “bubbles”, “circles”, “crescent”.

loadingSpinner

If you want to globally set the style of the ion-loadingController component, you can use this property. Allowable values are “lines”, “lines-small”, “dots”, “bubbles”, “circles”, “crescent”.

menuIcon

If your app uses the sidemenu template, you are probably using the ‘hamburger’ menu icon. If you would like to change it, pass in the ion-icon name or path to the icon.

refreshingIcon

If your app uses the ion-refresher, you can change the refreshing icon by passing in the ion-icon name or path to the icon. This is the value that the pullingIcon attribute references in the component.

refreshingSpinner

If your app uses the ion-refresher, you can change the icon that is shown while the refreshing action is being done by passing in the ion-icon name or path to the icon. his is the value that the refreshingSpinner attribute references in the component.

infiniteLoadingSpinner

If you want to globally set the style of the ion-infinite-scroll component’s spinner, you can use this property. Allowable values are “lines”, “lines-small”, “dots”, “bubbles”, “circles”, “crescent”.

There are some properties that are related to the tab bar. Since that component just underwent a late-beta change, I was not able to verify them: