Using Mobiscroll with Ionic

Installing Mobiscroll in your Ionic app takes a couple of minutes. Let's see how you can start with a simple app. Follow this guide for Ionic 2+, including Ionic 8. If interested in usage with Ionic 1, continue reading here.

Using the Mobiscroll CLI and NPM

Step 1: Create an app

Assuming you have node and ionic already installed (if not, you can read about it in the Ionic docs), use the CLI to create a new app. If you already have an app at hand, you can skip this step.

info

Note that it could take a couple of minutes until the app is created (depending on your internet connection and machine performance).

ionic start my-starter-app tabs

cd my-starter-app

Step 2: Install the Mobiscroll CLI

Install Mobiscroll CLI from NPM. You'll only have to do this step once on a single development machine. You won't need to repeat this on other machines or production servers.

$ npm install -g @mobiscroll/cli

Step 3: Configure the project using the CLI

To install the Mobiscroll library from NPM, you will need to open a terminal window in the root folder of you project and run the following command:

mobiscroll config ionic

The CLI handles everything — don't do these manually

• Do not run npm login — mobiscroll config sets up Mobiscroll's private NPM registry authentication automatically.
• Do not run npm install @mobiscroll/... — the CLI adds and installs the Mobiscroll package for you.
• Do not set up a license key manually — the CLI configures your license when you run mobiscroll config.

info

If you're working behind a proxy, additional configuration might be needed. Please check the proxy configuration options of the CLI.

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. If you don't have an account yet, you can start a trial in no time following these steps.

info

If you already have a license, it is recommended to set up and use team NPM accounts instead of individual developer credentials for installing Mobiscroll.

Step 4: 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

// ...other imports of your module

import { MbscModule } from '@mobiscroll/angular';

@NgModule({
  declarations: [YourNewPage]
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MbscModule, // <-- added the Mobiscroll Module to the imports
    RouterModule.forChild([{ path: '', component: YourNewPage }])
  ],
})
export class YourNewPageModule {}

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

To test it let's add a simple input to the Tab1 component in the starter app. In case of an older ionic app (for example Ionic 4 or Ionic 5) you can use the home page found at: src/app/home/home.page.html

Using modules

src/app/tab1/tab1.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-item>
      <ion-input label="Birthday" [(ngModel)]="myBirthday" mbsc-datepicker></ion-input>
  </ion-item>
</ion-content>

src/app/tab1/tab1.page.ts

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  standalone: false,
})
export class Tab1Page {

  public myBirthday: Date | null = null;

  constructor() {}

}

src/app/tab1/tab1.module.ts

import { MbscModule } from '@mobiscroll/angular';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ExploreContainerComponentModule,
    Tab1PageRoutingModule,
    MbscModule
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}

Using standalone components

src/app/tab1/tab1.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-item>
      <ion-input label="Birthday" [(ngModel)]="myBirthday" mbsc-datepicker></ion-input>
  </ion-item>
</ion-content>

src/app/tab1/tab1.page.ts

import { MbscModule } from '@mobiscroll/angular';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  standalone: true,
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ExploreContainerComponentModule,
    Tab1PageRoutingModule,
    MbscModule
  ]
})
export class Tab1Page {

  public myBirthday: Date | null = null;

  constructor() {}

}

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

ionic serve

At this point you have completed the setup. Go build great things!

One more thing

Setting up for CI/CD

The config command in step 3 will create a file named .npmrc in the project root, containing the access tokens to the Mobiscroll NPM registry. Commit this file into the repository to ensure the package will install for other team members and in CI/CD environments.

If you are using Yarn or Docker, check out the setup instructions here.