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;
}

View demos and other examples for the Calendar.

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;
}

View demos and other examples for the Color.

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;
}

View demos and other examples for the Date & TIme.

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' 
    }]
}

View demos and other examples for the Event Calendar.

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'
    };
}

View demos and other examples for the Forms.

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
    };
}

View demos and other examples for the Image.

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' }
    ];
}

View demos and other examples for the Listview.

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;
}

View demos and other examples for the Measurement.

Menustrip

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'
    }];
}

View demos and other examples for the Menustrip.

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;
}

View demos and other examples for the 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;
}

View demos and other examples for the Numpad.

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>;
}

View demos and other examples for the Range.

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;
}

View demos and other examples for the Rating.

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'
			}]
		  }]
		]
	};
}

View demos and other examples for the Scroller.

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>;
}

View demos and other examples for the Select.

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;
}

View demos and other examples for the Timer.

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;
}

View demos and other examples for the Timespan.

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 ...'
    }
}

View demos and other examples for the Treelist.

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 {}

View demos and other examples for the Widget.

What's next?

For customization options and API settings browse the Mobiscroll for Angular docs.

Initializing controls in Angular

Calendar

Color

Date & Time

Event Calendar

Forms

Image

Listview

Measurement

Menustrip

Number

Numpad

Range

Rating

Scroller

Select

Timer

Timespan

Treelist

Widget

What's next?