You can use the Mobiscroll Angular API in your Angular 2, Angular 4  and Ionic 2, Ionic 3 apps. We have put together a list of examples on how to use the controls in an Ionic app.

Make sure to have Mobiscroll installed and loaded in your project. See examples (HTML & TypeScript snippets) that you can grab and try locally.

Calendar

HTML

<input id="calendar" [(ngModel)]="calendar" mbsc-calendar placeholder="Please select..." />

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    calendar: Date;
}

Color

HTML

<input id="color" [(ngModel)]="color" mbsc-color placeholder="Please select..." />

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    color: string;
}

Date & Time

HTML

<input id="datetime" [(ngModel)]="datetime" mbsc-datetime placeholder="Please select..." />

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    datetime: Date;
}

Event Calendar

HTML

<input mbsc-eventcalendar [mbsc-data]="events" placeholder="Please select..."></input>

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    events: any = [{
        start: new Date(2016, 1, 1),
        end: new Date(2016, 1, 2),
        text: 'Conference',
        color: 'red'
    }, {
        d: '12/25',
        text: 'Christmas'
    }]
}

Forms

HTML

<mbsc-form [options]="formSettings">
    <mbsc-input name="username">Username</mbsc-input>
    <mbsc-input name="password" type="password">Password</mbsc-input>
    <mbsc-button type="submit">Sign In</mbsc-button>
</mbsc-form>

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    formSettings = {
        theme: 'mobiscroll'
    };
}

Image

HTML

<ul [(mbsc-image)]="image" [mbsc-options]="imageSettings">
    <li data-val="Share" data-icon="share">
        <p>Share</p>
    </li>
    <li data-val="Delete" data-icon="remove">
        <p>Delete</p>
    </li>
</ul>

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    image: string;
    imageSettings: any = {
        enhance: true
    };
}

Listview

HTML

<mbsc-listview>
    <mbsc-listview-item *ngFor="let item of data">{{item.text}}</mbsc-listview-item>
</mbsc-listview>

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    data = [
{ text: 'Apples' },
{ text: 'Cakes' },
{ text: 'Bottles of Juice' }
    ];
}

Measurement

HTML

<input id="measurement" [(ngModel)]="measurement" mbsc-measurement placeholder="Please select..." />

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    measurement: string;
}

HTML

<mbsc-menustrip>
<mbsc-menustrip-item *ngFor="let item of menustripItems" [(selected)]="item.selected" [icon]="item.icon">{{item.text}}</mbsc-menustrip-item>
</mbsc-menustrip>

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    menustripItems = [{
        selected: false,
        icon: 'connection',
        text: 'Wi-Fi'
    }, {
        selected: false,
        icon: 'location',
        text: 'Location'
    }, {
        selected: true,
        icon: 'volume-medium',
        text: 'Sound'
    }];
}

Number

HTML

<input id="number" [(ngModel)]="number" mbsc-number placeholder="Please select..." />

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    number: number;
}

Numpad

HTML

<input id="numpad" [(ngModel)]="numpad" mbsc-numpad placeholder="Please select..." />

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    numpad: number;
}

Range

HTML

<input id="range" [(ngModel)]="range" mbsc-range placeholder="Please select..." />

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    range: Array <Date>;
}

Rating

HTML

<input id="rating" [(ngModel)]="rating" mbsc-rating placeholder="Please select..." />

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    rating: number;
}

Scroller

HTML

<input id="scroller" [(ngModel)]="scroller" mbsc-scroller placeholder="Please select..." />

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
scrollerSettings = {
showLabel: true,
wheels: [
 [{
label: 'First wheel',
data: ['0', '1', '2', '3', '4', '5', '6', '7']
 }, {
label: 'Second wheel',
data: [{
 value: 0,
 display: 'a'
}, {
 value: 1,
 display: 'b'
}, {
 value: 2,
 display: 'c'
}, {
 value: 3,
 display: 'd'
}]
 }]
]
};
}

Select

HTML

<select [(ngModel)]="select" mbsc-select>
    <option value="1">Berlin</option>
    <option value="2">London</option>
    <option value="3">New York</option>
    <option value="4">Paris</option>
</select>

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    select: Array<string>;
}

Timer

HTML

<input id="timer" [(ngModel)]="timer" mbsc-timer placeholder="Please select..." />

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    timer: number;
}

Timespan

HTML

<input id="timespan" [(ngModel)]="timespan" mbsc-timespan placeholder="Please select..." />

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    timespan: number;
}

Treelist

HTML

<ul mbsc-treelist [(ngModel)]="treelist" [mbsc-options]="listSettings">
    <li>America
        <ul>
   <li>Mexico</li>
   <li>Brasil</li>
</ul>
    </li>
    <li>Europe
<ul>
   <li>Germany</li>
   <li>France</li>
   <li>Italy</li>
</ul>
</li>
    <li>Asia
<ul>
   <li>China</li>
</ul>
    </li>
</ul>

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {
    treelist: string;
    listSettings: any = {
        placeholder: 'Please Select ...'
    }
}

Widget

HTML

<mbsc-widget [options]="widgetSettings" #mbscWidget="mobiscroll">
    <div class="md-dialog">
        <h3 class="md-text-center">Hi</h3>
        <p class="md-text-center">How are you feeling today?</p>
    </div>
</mbsc-widget>

<button (click)="mbscWidget.instance.show()">Show Widget</button>

TypeScript

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

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {}

What's next?

Did this answer your question?