Using Mobiscroll with Ionic 2 and Ionic 3 including Ionic 4
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 both Ionic 2 and Ionic 3 and Ionic 4. If interested in usage with Ionic 1, continue reading here.
Using the Mobiscroll CLI and NPM to install it in your Ionic app (PREFERRED WAY)
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.
$ ionic start myStarterApp tabs $ 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
mobiscroll config ionic in your terminal window.
$ mobiscroll config ionic
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 the
src/pages/home/home.html. In case of an Ionic 4 app you will find the home page here:
<ion-content> <ion-item> <ion-label>Birthday</ion-label> <ion-input [(ngModel)]="myBirthday" mbsc-date></ion-input> </ion-item> </ion-content>
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!
How to start a trial
First, start a free trial by entering your email address on the Mobiscroll homepage and create your account.
This is how the free trial works:
- You can try Mobiscroll for free.
The trial needs an active connection to Mobiscroll servers for validation. Don't worry, the licensed product will work offline with downloadable resource files.
Read about the differences between trial and licensed products.
- You can upgrade to the licensed product at any time during or after your trial.
Enter your first name, set a password and you're ready to go!
At this point you have a running trial. You can use the email address you provided with your password to continue your setup.
Select Ionic 2/3/4. Then hit the big blue button.
Manually including Mobiscroll in your Ionic 2/3/4 app
If you are looking for how to include Mobiscroll into your Ionic app manually without the Mobiscroll CLI, you can find instructions here. (please keep in mind that the recommended way is to use the Mobiscrol CLI using the above guide)