General Date & Time pickers Event Calendar Form components Gesture enabled responsive list Numeric pickers Pickers & dropdowns Page layout & navigation Tools Accessibility

Welcome to the Mobiscroll API Reference. You can find the most up to date information about usage and customization options here.

Supported Platforms - Android 4.1+ including Android 10, iOS 7+ including iOS 13 and all major desktop browsers, including Chrome, Firefox, Safari, Edge and Internet Explorer 10+.

Having trouble? Ask for help.


Getting Started with Mobiscroll for Angular

Mobiscroll is a collection of UI components that helps deliver great mobile apps, websites with a great user experience and in getting five-star app store reviews. The controls follow platform UX guidelines and can be styled with the Theme Builder for a perfect fit.

Requires TypeScript 2.2.0 or newer

For getting started with Mobiscroll for Ionic 2 or Ionic 3 please follow this guide.

Using the Mobiscroll CLI and NPM

Step 1: Create an app

If you don't have an app at hand, create a starter with the Angular CLI (sudo access might be required).

Note that it could take a couple of minutes until the app is created (depending on your internet connection and machine performance).
$ ng new my-starter-app
$ cd my-starter-app

Step 2: Install the Mobiscroll CLI and configure the app

Install Mobiscroll CLI from NPM (you'll only have to do it once).

$ npm install -g @mobiscroll/cli

Run mobiscroll config angular in your terminal window.

$ mobiscroll config angular 

The command will ask for your credentials (email and password). If you already have a mobiscroll account but you are unsure about the details, you find them on your account page here.. If you don't have an account yet, you can start a trial in no time following these steps.

Step 3: Let's see if Mobiscroll was installed correctly

To test it let's add a simple input to one of your pages, like src/app/app.component.html

<mbsc-form>
    <mbsc-input [(ngModel)]="myName">Name</mbsc-input>
    <mbsc-date [(ngModel)]="myBirthday">Birthdate</mbsc-date>
</mbsc-form>

To build the app just run the serve command in the CLI:

$ ng serve --open
Please note that the cli only imports the MbscModule in the top module or the modules you choose at configuration time if there are more than one.
If you are using multiple @NgModules in your app, the MbscModule should be imported in all modules you want to use the components in.
See how to import Mobiscroll to other modules.

Setting up a downloaded Mobiscroll package in your Angular app

If you don't have access to the full framework of Mobiscroll components, or you don't want to include the whole Mobiscroll library from NPM to your project, your other option is to use the Download Builder.

The Mobiscroll Download builder let's you customize packages by cherry picking the components, themes, custom themes and icon packs you actually need. This also helps to reduce the package size, thus speeding up the loading times of your apps.

Step 1. Download a custom package from the download page

Go ahead to the download page, select the components, themes and font icon packs you need, and hit the download button.
NOTE: If you have access to more frameworks (depending on your licenses) you should also select the Angular framework there.

After dowloading the package, unzip it and copy the lib folder from the package to the src folder of your Angular app.

Step 2. Configure your project using the CLI

The Mobiscroll CLI is only needed for the configuration. You can install it on your local development machine, and configure your app there. It doesn't have to be installed on your server.
$ npm install -g @mobiscroll/cli

The Mobiscroll CLI will do the rest of the work. It will add the Mobiscroll Module, to your app.module.ts and it will also set up the stylesheets depending on which format you choose. You can choose between CSS or SCSS depending on how much customization you need. If these terms don't tell you much, don't worry, just stick with the CSS.

To start the setup, run the config command in your project's root folder with the --no-npm flag:

$ mobiscroll config angular --no-npm

Step 3. Importing Mobiscroll to other modules (Optional)

When you have only one module (the app.module.ts), the previous configuration process will add an import for the Mobiscroll module there, otherwise it will ask you to choose the Modules you want to use Mobiscroll in.
If you add more modules later, or decide that you need the mobiscroll components in a module you didn't add in the configuration phase, you can add the imports manually like this:

new-module.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MbscModule } from '@mobiscroll/angular';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MbscModule // <-- added the Mobiscroll Module to the imports
  ]
})
export class NewModuleModule { }

At this point you should be able to use the Mobiscroll Components and Directives in your app.

Step 4. Test the setup with a simple example

You can add components to your templates, for example using the Date & Time component should look like this:

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
    <div>
      <mbsc-date [(ngModel)]="birthday">My Birthday</mbsc-date>
    </div>
  `,
})
export class AppComponent {
  name = 'Angular';
  birthday: Date = new Date(1988, 5, 24);
}

You can check out our demos section for more usage examples.

Passing options

Every component can be tuned to your needs, by giving certain settings to them. You can pass these settings with the [mbsc-options] attribute for directives and the [options] attribute for components.
Also, you can pass each option inidividually as an attribute to any component. Here's an example:

Example for passing options
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
    <div>
      <input [(ngModel)]="birthday" mbsc-datetime [mbsc-options]="birhtdayOptions" />
      <mbsc-datetime [(ngModel)]="birthday" [options]="birthdayOptions">My Birthday</mbsc-datetime>
      <mbsc-datetime [(ngModel)]="birthday" [display]="birthDisplay" [theme]="birthTheme">My Birthday</mbsc-datetime>
    </div>
  `,
})
export class AppComponent {
  name = 'Angular';
  birthday: Date = new Date(1988, 5, 24);
  birthdayOptions = {
    display: 'bottom',
    theme: 'ios'
  };
  birthDisplay: 'bottom';
  birthTheme: 'ios';
}

Calling instance methods

Sometimes you may want to access the component instances, to call their methods. For example you could show a component programmatically by calling the .show() method of its instance.

Mobiscroll directives are exported as "mobiscroll", so you can use them as template variables. Every directive and component has an instance property, that holds a reference to the mobiscroll instance.

@Component({
  selector: 'my-app',
  template: `<div>
      <input [(ngModel)]="birthday" mbsc-datetime #myScroller="mobiscroll" />
      <button (click)="myScroller.instance.show()">Show</button>
    </div>
  `,
})
export class AppComponent {
  birthday: Date = new Date(1988, 5, 24);
}

For more examples check out the demo page.