Contents

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 Oreo, iOS 6+ including iOS 11, Windows Phone 10 and all major mobile and desktop browsers

Having trouble? Ask for help.


Getting Started with Mobiscroll for Angular

Requires TypeScript >= 2.2.0

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

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.

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 start myStarterApp
$ cd myStarterApp

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

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)]="myBirthday" mbsc-date>Birthdate</mbsc-input>
</mbsc-form>

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

$ ng serve --open

Manually including Mobiscroll in your Angular app

Step 1. Set up the angular quickstart seed

Download and set up the angular quickstart seed from here.

Unzip it into your project folder. Then perform the remaining steps with these terminal commands.

Step 2. Download the Mobiscroll components

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

Step 3. Import the mobiscroll module

To import Mobiscroll, open app/app.module.ts and add the following statement after the other imports.

import { MbscModule } from '../lib/mobiscroll/js/mobiscroll.custom.min.js';
import { FormsModule } from '@angular/forms';

Also add the MbscModule and the FormsModule to the imports enumeration

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

Step 4. Load the stylesheets

Open the index.html from the src folder, and add the following line to the header

<link rel="stylesheet" href="lib/mobiscroll/css/mobiscroll.custom.min.css">

At this point everything should be ready for using the mobiscroll directives and components.

Step 5. Test the directives with a simple example

Open the app.component.ts and add the birthday property of type date. In the template add an input with the mbsc-date directive and ngModel to bind the value to the birthday.
It should look like this:

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

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
    <div>
      <input [(ngModel)]="birthday" mbsc-date>
    </div>
  `,
})

export class AppComponent {
  name = 'Angular';
  birthday: Date = new Date(1988, 5, 24);
}

Check your browser! When clicking the input, the mobiscroll date picker should pop up for value selection!

Common options

Every component can be tuned to your needs, by the initialization options. You can pass the options with the [mbsc-options] attribute for directives and [options] attribute for components.

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

Calling instance methods

Mobiscroll directives are exported as mobiscroll, so you can use them as template variables. Every directive 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.