Config

The Config service provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more.

Usage

Global

Basic example

import { IonicModule } from '@ionic/angular';

@NgModule({
  ...
  imports: [
    BrowserModule,
    IonicModule.forRoot({
      rippleEffect: false,
      mode: 'md'
    }),
    AppRoutingModule
  ],
  ...
})

In the above example, we are disabling the Material Design ripple effect across the app, as well as forcing the mode to be Material Design.

Customizing Animations

import { IonicModule } from '@ionic/angular';

@NgModule({
  ...
  imports: [
    BrowserModule,
    IonicModule.forRoot({
      toastEnter: (AnimationC: Animation, baseEl: ShadowRoot, position: string): Promise<Animation> => {
        const baseAnimation = new AnimationC();

        const wrapperAnimation = new AnimationC();

        const hostEl = (baseEl.host || baseEl) as HTMLElement;
        const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;

        wrapperAnimation.addElement(wrapperEl);

        const bottom = `calc(8px + var(--ion-safe-area-bottom, 0px))`;
        const top = `calc(8px + var(--ion-safe-area-top, 0px))`;

        switch (position) {
          case 'top':
            wrapperEl.style.top = top;
            wrapperEl.style.opacity = 1;
            wrapperAnimation.fromTo('transform', `translateY(-${hostEl.clientHeight}px)`, 'translateY(10px)')
            break;
          case 'middle':
            const topPosition = Math.floor(
              hostEl.clientHeight / 2 - wrapperEl.clientHeight / 2
            );
            wrapperEl.style.top = `${topPosition}px`;
            wrapperAnimation.fromTo('opacity', 0.01, 1);
            break;
          default:
            wrapperEl.style.bottom = bottom;
            wrapperAnimation.fromTo('opacity', 0.01, 1);
            break;
        }
        return Promise.resolve(baseAnimation
          .addElement(hostEl)
          .easing('cubic-bezier(.36,.66,.04,1)')
          .duration(400)
          .add(wrapperAnimation));
      },
    }),
    AppRoutingModule
  ],
  ...
})

In the above example, we are customizing the “enter” animation for the ion-toast component. When an ion-toast component is presented from the top, it will slide down instead of fading in.

By Component

Basic Example

import { Component } from '@angular/core';
import { Config } from '@ionic/angular';
@Component({...})
export class HomePage {
  constructor(private config: Config) {
    const text = this.config.get('backButtonText');
    this.config.set('backButtonIcon', 'home');
  }
}

Config Options

Below is a list of config options that Ionic uses.