Configuring Ionic App Settings
1. Configuring App Settings
Example: Basic Ionic Config
{"name": "MyApp",
"version": "1.0.0",
"app_id": "abc123",
"build": {
"ionic:build": "ionic build"
},
"devServer": {
"port": 8100,
"host": "localhost"
},
"integrations": {
"capacitor": {}
},
"build": {
"ionic:build": "ionic build"
},
"dev": {
"ionic:serve": "ionic serve"
},
"plugins": {
"@capacitor/app": {},
"@capacitor/keyboard": {}
}
}| Property | Description | Default Value | Notes |
|---|---|---|---|
| name | Name of the app | None | Required field |
| version | Version of the app | 1.0.0 | Follows semantic versioning |
| app_id | Unique identifier for the app | None | Required for Capacitor integration |
| build | Build configuration | None | Defines build scripts and settings |
| devServer | Development server settings | Port 8100, host localhost | Used for local development |
| integrations | Integration settings (e.g., Capacitor) | None | Defines integrations with native platforms |
| plugins | Plugin configurations | None | Configures plugins like @capacitor/app |
Note: The
ionic.config.json file is used to configure Ionic app settings and is essential for building and serving your application.Warning: Ensure that the
app_id is unique to avoid conflicts in Capacitor integrations.2. Setting Mode Globally
| Mode | Description | Default Value | Notes |
|---|---|---|---|
| mode | Global mode setting for the app | md |
Can be ios, md, or wp |
Example: Setting Mode Globally
import { IonicModule } from '@ionic/angular';
@NgModule({
imports: [
IonicModule.forRoot({
mode: 'md'
})
]
})
export class AppModule { }Note: The mode affects the default styling and behavior of Ionic components across your app.
3. Configuring Ripple Effect
| Property | Values | Description |
|---|---|---|
| rippleEffect | true | false |
Enables or disables the ripple effect on interactive elements. |
| rippleColor | string |
Custom color for the ripple effect (e.g., #00ff00). |
Note: The ripple effect is enabled by default in Ionic components.
4. Setting Animation Duration
| Property | Values | Description |
|---|---|---|
| animated | true | false |
Enables or disables all animations in the app. Default is true. |
| animationDuration | number |
Defines the duration (in milliseconds) for all animations. Default is 300. |
Example: Configure Animation Duration
import { IonicModule } from '@ionic/angular';
@NgModule({
imports: [
IonicModule.forRoot({
animated: true,
animationDuration: 500
})
]
})
export class AppModule { }Note: Setting
animationDuration to 0 will effectively disable animations.5. Configuring Back Button
| Property | Description | Default | Notes |
|---|---|---|---|
| backButton | Configures the behavior of the back button in Ionic apps. | { visible: true, icon: 'arrow-back', text: 'Back' } |
Can be customized per view or globally. |
Example: Customizing Back Button in Ionic
import { IonicModule } from '@ionic/angular';
@NgModule({
imports: [
IonicModule.forRoot({
backButtonText: 'Go Back',
backButtonIcon: 'arrow-back-outline'
})
]
})
export class AppModule { }
Note: The back button behavior can also be customized per page using the
ionBackButton component.
Example: Using ionBackButton Component
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
6. Using NavAnimation
| Property | Values | Description |
|---|---|---|
| animated | true | false |
Enables or disables all animations in the app. Defaults to true. |
| animation | ios-transition | md-transition | wp-transition |
Defines the default transition animation for navigation. Defaults to ios-transition. |
Example: Setting Default Navigation Animation
import { IonicModule } from '@ionic/angular';
@NgModule({
imports: [
IonicModule.forRoot({
animated: true,
animation: 'ios-transition'
})
]
})
export class AppModule { }
Note: The
animation property can be set to ios-transition, md-transition, or wp-transition to match the platform-specific animation styles.
7. Setting Keyboard Options
| Option | Values | Description |
|---|---|---|
| keyboardStyle | "native" | "cordova" |
Determines how the keyboard is handled. native uses the device's native keyboard, while cordova uses Cordova's keyboard plugin. |
| keyboardResize | "native" | "ionic" | "none" |
Controls how the app resizes when the keyboard appears. native uses native behavior, ionic adjusts layout for keyboard, and none does not resize. |
| keyboardHeight | number |
Manually sets the keyboard height in pixels, useful for custom keyboards or when automatic detection fails. |
Example: Configure Keyboard Options in Ionic
import { Keyboard } from '@ionic/angular';
Keyboard.setKeyboardOptions({
keyboardStyle: 'native',
keyboardResize: 'ionic',
keyboardHeight: 300
});
Note: The
keyboardResize option requires the Cordova Keyboard plugin to be installed for full functionality on mobile devices.
8. Configuring ScrollAssist
| Property | Values | Description |
|---|---|---|
| scrollAssist | false, true |
Enables or disables automatic scrolling to focus elements when the keyboard appears. Defaults to false in Ionic 5+. |
| scrollPadding | false, true |
Enables or disables padding to prevent content from being hidden under the keyboard. Defaults to true. |
Example: Enabling ScrollAssist in Ionic Config
import { IonicModule } from '@ionic/angular';
@NgModule({
imports: [
IonicModule.forRoot({
scrollAssist: true,
scrollPadding: true
})
]
})
export class AppModule { }
Note:
scrollAssist is particularly useful in mobile web apps or hybrid apps where the virtual keyboard can obscure input fields.
9. Using Platform Overrides
Platform overrides in Ionic allow you to customize app behavior and styling based on the target platform (iOS, Android, Web). These overrides are particularly useful for handling platform-specific UI elements or adjusting configurations.
| Override Type | Description | Usage Example |
|---|---|---|
| platform | Specifies the target platform for configuration | ios, android, web |
| config key | Configuration property to override | backButtonIcon, menuType |
Example: Platform-specific Back Button Icon
import { IonicModule } from '@ionic/angular';
@NgModule({
imports: [
IonicModule.forRoot({
backButtonIcon: 'chevron-back',
ios: {
backButtonIcon: 'arrow-back'
},
android: {
backButtonIcon: 'arrow-back'
}
})
]
})
Note: Platform overrides are defined within the Ionic config object and can be applied to various components or global settings.
10. Setting Safe Area Insets
| Property | Values | Description |
|---|---|---|
| viewport-fit | cover | contain |
Determines how the viewport is displayed in relation to the safe area. cover extends content to the edge, contain keeps content within safe area. |
| padding | safe-area-inset-top | safe-area-inset-right | safe-area-inset-bottom | safe-area-inset-left |
CSS environment variables that define padding values based on the device's safe area. |
Example: Using Safe Area Insets in CSS
.container {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}Note: Safe area insets are particularly important for iOS devices with notches or home indicators. These values ensure content is not clipped or obscured.