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

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.

Getting started with Mobiscroll and Angular

Here is an example of how to use the plugin in an Angular quickstart application

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.

Create a folder called lib under the "src" folder. You will copy the mobiscroll source files here.

2. Download the Mobiscroll components

After dowloading the package from the download page, unzip it. Copy the contents of the lib folder from the package to the lib folder you just created.

You should have a mobiscroll.custom.min.js, a mobiscroll.custom.min.d.ts and a mobiscroll.custom.min.css file under the lib folder.

3. Import the mobiscroll module

Open the app.module.ts file under the app folder and add the following import statement after the other imports, to import the mobiscroll module

import { MbscModule } from '../lib/mobiscroll/js/mobiscroll.custom.min.js'

Also add the MbscModule to the imports enumeration

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

Keep in mind, that the mobiscroll needs the @angular/animations module in order to work. The quickstart seed already contains that module, but if you are integrating into an already existing app and it is missing, you can install it via npm:
$ npm install @angular/animations --save

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 to use the mobiscroll directives and components

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:

@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 to select the value!

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.

Preorder available for Ember JS
What you'll get:
- Exclusive Early Beta Access
- Show your interest in the product. Based on the preorders we'll set the development and shipping priorities
- Get access to the full Framework until we ship
- Support and Maintenance is on us until we release the Mobiscroll for Ember
- We believe in delivering great products so if for any reason you are not satisfied, you'll get a full refund