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.
  
efreshingSpinner
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:

  • tabbarPlacement: string;
  • tabbarLayout: string
  • tabbarHighlight: boolean

The IonicConfig list contains other parameters, but I did not explore them all.

Hope this helps you build better Ionic 4 applications.

 

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.