Using Mobiscroll with Ionic 2, 3, 4, 5, 6 and Ionic 7
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+. 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 my-starter-app tabs
$ 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
Run mobiscroll config ionic
in your terminal window with the version flag.
$ mobiscroll config ionic --version=4
--version
flag refers to the Mobiscroll version.
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.
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:
// ...other imports of your module
import { MbscModule } from '@mobiscroll/angular';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
MbscModule, // <-- added the Mobiscroll Module to the imports
RouterModule.forChild([{ path: '', component: YourNewPage }])
],
declarations: [YourNewPage]
})
export class YourNewPageModule {}
Step 4: 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 and Ionic 5 app you will find the home page here: src/app/home/home.page.html
<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/5/6. Then hit the big blue button.
If you are looking for how to include Mobiscroll into your Ionic app manually without the Mobiscroll CLI, you can find instructions below. (Please keep in mind that the recommended way is to use the Mobiscrol CLI using the above guide.)
Manually including Mobiscroll in your Ionic 2/3/4/5/6 app
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: Copy Mobiscroll into your app
The next step is to unpack the downloaded mobiscroll package and copy the lib
folder to the src
folder of the myStarterApp
At the end you should have the mobiscroll js file under the myStarterApp/src/lib/mobiscroll/js/
folder.
The same is true for the css file: myStarterApp/src/lib/mobiscroll/css/
.
Step 3: Include the CSS resources
Let's add the stylesheet to the index.html.
Open the index.html
from the src folder and add the following line before the closing </head>
tag:
<link rel="stylesheet" href="lib/mobiscroll/css/mobiscroll.angular.min.css">
When the ionic app is built, it will look for the resources under the www
folder. Unfortunately at every build the folder contents are overwritten.
To counter this, we will need a script that copies the mobiscroll styling resources to the www
folder for each build.
Create a scripts folder under the root folder of the app (myStarterApp/scripts
). Then create a file called copy-mobiscroll-css.js
with the following content or just download the copy-mobiscroll-css.js file:
module.exports = {
copyMobiscrollCss: {
src: ['{{ROOT}}/src/lib/mobiscroll/css/*'],
dest: '{{WWW}}/lib/mobiscroll/css/'
}
}
After that open the myStarterApp/package.json
file and add an entry to the config section (if there is no config section, create that too)
"config": {
"ionic_copy": "./Scripts/copy-mobiscroll-css.js"
}
Step 4: Importing the module
Open the src/app/app.modules.ts
file and import the MbscModule
and the FormsModule
from the above mentioned paths:
import { MbscModule } from '../lib/mobiscroll/js/mobiscroll.angular.min';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
// leave the other imports as they are
// ...
MbscModule, // add the mobiscroll module
FormsModule // add the forms module
],
declarations: // ...
MbscModule
and the FormsModule
should be imported in the specific page's module.ts
file instead of the app.modules.ts
.
At this point the app should be ready for the development!
Step 5: Let's see if Mobiscroll was installed correctly
To test it let's add a simple input to the src/pages/home/home.html
<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
Manually including Mobiscroll in your Ionic 4 app
Step 3: Include the CSS resources
In the root folder of the ionic 4 app there is an angular.json
file which holds configuration properties. You should add the mobiscroll css here under the styles
property:
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
},
{
"input": "src/lib/mobiscroll/css/mobiscroll.angular.min.css"
}
]
Step 4: Importing the module
In Ionic 4 lazy loaded modules are used by default. You will have to include the MbscModule
separately to every module where you want to use the Mobiscroll components. For example if you want to use the Mobiscroll components on the home page you will have to include the MbscModule
and FormModule
to the src/app/home/home.module.ts
:
import { MbscModule } from '../../lib/mobiscroll/js/mobiscroll.angular.min';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
// leave the other imports as they are
// ...
MbscModule, // add the mobiscroll module
FormsModule // add the forms module
],
declarations: // ...
Step 5: Let's see if Mobiscroll was installed correctly
To test it let's add a simple input to the src/app/home/home.page.html
<ion-content>
<ion-item>
<ion-label>Birthday</ion-label>
<ion-input [(ngModel)]="myBirthday" mbsc-date></ion-input>
</ion-item>
</ion-content>
Other ways to get started
To see how mobiscroll is installed in an Ionic project you can download the Kitchen Sink app or the Starter for Ionic 3.