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

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.

For getting started with Mobiscroll for Ionic 2+ 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).

$ 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

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

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 Datepicker to one of your pages, like the template part to the src/app/app.component.html and the component part to the src/app/app.component.ts

<mbsc-datepicker [(ngModel)]="birthday"></mbsc-datepicker>

@Component({
    selector: 'my-app'
})
export class AppComponent {
    birthday: Date = new Date(1988, 1, 28);
}

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

$ ng serve --open

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

$ 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:

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:

<mbsc-datepicker [(ngModel)]="birthday"></mbsc-datepicker>

@Component({
    selector: 'my-app'
})
export class AppComponent {
    birthday: Date = new Date(1988, 1, 28);
}

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

Passing options

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

<div>
    <input [(ngModel)]="birthday" mbsc-datepicker [options]="birthdayOptions" />
    <mbsc-datepicker [(ngModel)]="birthday" [options]="birthdayOptions">My Birthday</mbsc-datepicker>
    <mbsc-datepicker [(ngModel)]="birthday" [display]="birthDisplay" [theme]="birthTheme">My Birthday</mbsc-datepicker>
</div>

@Component({
    selector: 'my-app'
})
export class AppComponent {
  birthday: Date = new Date(1988, 1, 28);
  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 .open() method of its instance.

Mobiscroll directives are exported as "mobiscroll", so you can use them as template variables.

@Component({
  selector: 'my-app',
  template: `<div>
     <-- using a directive -->
     <input [(ngModel)]="birthday" mbsc-datepicker #myPickerDirective="mobiscroll" />
     <button (click)="myPickerDirective.open()">Open Picker of Directive</button>

     <-- using a component -->  
     <mbsc-datepicker [(ngModel)]="birthday" #myPickerComponent></mbsc-datepicker>
     <button (click)="myPickerComponent.open()">Open Picker of Component</button>
    </div>
  `,
})
export class AppComponent {
  birthday: Date = new Date(1988, 5, 24);
}

import { Component, ViewChild } from '@angular/core';
import { MbscDatepicker } from '@mobiscroll/angular';

@Component({
  selector: 'my-app',
  template: `<div>
     <mbsc-datepicker [(ngModel)]="birthday" #myPickerComponent></mbsc-datepicker>
     <button (click)="myOpen()">Open</button>
    </div>
  `,
})
export class AppComponent {
  @ViewChild('myPickerComponent', { static: false })
  datepickerInstance: MbscDatepicker;

  open() {
    this.datepickerInstance.open();
  }

  birthday: Date = new Date(1988, 5, 24);
}

For more examples check out the demo page.

Using Mobiscroll v4 alongside v5

The 5th major version of Mobiscroll contains a limited number of components, compared to v4. If you need to keep using some components from v4, which are not present in the newer version, please follow this guide.