Global options

The setOptions function

Global options can be used to set options for all components used on a page. Useful for speicifying application-wide options, like theme and locale.

You can use the setOptions utility function to specify the global options. It can be called on initial page load or any time later. All existing component on the page will be updated with the new options, and components instantiated later will take into account the new global options.

Components can override the global options with their individual options, e.g. if a component has a specific theme specified, it will override the global theme option.

app.component.ts

import {
  setOptions,
  localeDe
} from '@mobiscroll/angular';

// Specify options globally for all components
setOptions({
  locale: localeDe,
  theme: 'ios',
  themeVariant: 'dark',
});

The options service

The MbscOptionsService is an angular service that provides options to all Mobiscroll components down the component hierarchy.

Using modules

The Mobiscroll options service can be provided from the root module to pass the options to all of the compoents.

app.module.ts

// ...

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscModule, MbscOptionsService } from '@mobiscroll/angular';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MbscModule,
    FormsModule,
    BrowserModule
  ],
  providers: [MbscOptionsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { MbscOptionsService } from '@mobiscroll/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: false,
})
export class AppComponent {

  constructor(protected options: MbscOptionsService) {}

  SwitchToIosLight() {
    this.options.setOptions({
      theme: 'ios',
      themeVariant: 'light',
    });
  }
  SwitchToIosDark() {
    this.options.setOptions({
      theme: 'ios',
      themeVariant: 'dark',
    });
  }
}

app.component.html

<mbsc-button (click)="SwitchToIosLight()">Light theme</mbsc-button>
<mbsc-button (click)="SwitchToIosDark()">Dark theme</mbsc-button>

<mbsc-eventcalendar></mbsc-eventcalendar>

In the above example clicking the buttons will set the theme and themeVariant and will automatically be passed on to the components, since the service is provided in the app root module.

Using standalone components

When using the (relatively) new standalone components, there are no modules defined, you can still use the MbscOptionsService. Here's an example on how to use it:

app.component.ts

// ...

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MbscModule, MbscOptionsService } from '@mobiscroll/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, MbscModule, CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  providers: [MbscOptionsService],
})
export class AppComponent {
  constructor(protected options: MbscOptionsService) { }

  SwitchToIosLight() {
    this.options.setOptions({
      theme: 'ios',
      themeVariant: 'light',
    });
  }
  SwitchToIosDark() {
    this.options.setOptions({
      theme: 'ios',
      themeVariant: 'dark',
    });
  }
}