Make sure to have Mobiscroll installed and loaded in your project. See examples (HTML and TypeScript snippets) that you can grab and try locally.
For examples in a plain Angular app see this other article.
Calendar
HTML
<ion-label>Date</ion-label>
<ion-input [(ngModel)]="calendar" mbsc-calendar [mbsc-options]="calendarSettings"></ion-input>
TypeScript
export class HomePage {
calendar: Date;
calendarSettings: any = {
theme: "ios",
display: "bottom"
};
}
- View demos and other examples for the Calendar.
Color
HTML
<ion-label>Color</ion-label>
<ion-input [(ngModel)]="color" mbsc-color [mbsc-options]="colorSettings"></ion-input>
TypeScript
export class HomePage {
color: string;
colorSettings: any = {
theme: "ios",
display: "bottom"
};
}
- View demos and other examples for the Color.
Date & Time
HTML
<ion-label>Date</ion-label>
<ion-input [(ngModel)]="selectedDate" mbsc-date [mbsc-options]="dateSettings"></ion-input>
TypeScript
export class HomePage {
selectedDate: Date;
dateSettings: any = {
theme: "ios",
display: "bottom"
};
}
- View demos and other examples for the Date & TIme.
Event Calendar
HTML
<ion-label>Event calendar</ion-label>
<ion-input mbsc-eventcalendar [mbsc-data]="events" [mbsc-options]="eventSettings"></ion-input>
TypeScript
export class HomePage {
events: any = [{
start: new Date(2016, 1, 1),
end: new Date(2016, 1, 2),
text: 'Conference',
color: 'red'
}, {
d: '12/25',
text: 'Christmas'
}];
eventSettings: any = {
theme: "ios",
display: "bottom"
};
}
- 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
export class HomePage {
formSettings = {
theme: "ios",
display: "bottom"
};
}
- 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
export class HomePage {
image: string;
imageSettings: any = {
enhance: true,
theme: "ios",
display: "bottom"
};
}
- View demos and other examples for the Image.
Listview
HTML
<mbsc-listview [options]="listviewSettings">
<mbsc-listview-item *ngFor="let item of data">{{item.text}}</mbsc-listview-item>
</mbsc-listview>
TypeScript
export class HomePage {
data = [
{ text: 'Apples' },
{ text: 'Cakes' },
{ text: 'Bottles of Juice' }
];
listviewSettings: any = {
theme: "ios",
display: "bottom"
}
}
- View demos and other examples for the Listview.
Measurement
HTML
<ion-label>Measurement</ion-label>
<ion-input [(ngModel)]="measurement" mbsc-measurement [mbsc-options]="measurementSettings"></ion-input>
TypeScript
export class HomePage {
measurement: string;
measurementSettings: any = {
theme: "ios",
display: "bottom"
};
}
- View demos and other examples for the Measurement.
Menustrip
HTML
<mbsc-menustrip [options]="menustripSettings"><ion-label>Measurement</ion-label>
<ion-input [(ngModel)]="measurement" mbsc-measurement [mbsc-options]="measurementSettings"></ion-input>
TypeScript
export class AppComponent {
menustripItems = [{
selected: false,
icon: 'connection',
text: 'Wi-Fi'
}, {
selected: false,
icon: 'location',
text: 'Location'
}, {
selected: true,
icon: 'volume-medium',
text: 'Sound'
}];
menustripSettings: any = {
theme: "ios",
display: "bottom"
};
}
- View demos and other examples for the Menustrip.
Number
HTML
<ion-label>Number</ion-label>
<ion-input [(ngModel)]="number" mbsc-number [mbsc-options]="numberSettings"></ion-input>
TypeScript
export class HomePage {
number: number;
numberSettings: any = {
theme: "ios",
display: "bottom"
};
}
- View demos and other examples for the Number.
Numpad
HTML
<ion-label>Numpad</ion-label>
<ion-input [(ngModel)]="numpad" mbsc-numpad [mbsc-options]="numpadSettings"></ion-input>
TypeScript
export class HomePage {
numpad: number;
numpadSettings: any = {
theme: "ios",
display: "bottom"
};
}
- View demos and other examples for the Numpad.
Range
HTML
<ion-label>Range</ion-label>
<ion-input [(ngModel)]="range" mbsc-range [mbsc-options]="rangeSettings"></ion-input>
TypeScript
export class HomePage {
range: Array <Date>;
rangeSettings: any = {
theme: "ios",
display: "bottom"
};
}
- View demos and other examples for the Range.
Rating
HTML
<ion-label>Rating</ion-label>
<ion-input [(ngModel)]="rating" mbsc-rating [mbsc-options]="ratingSettings"></ion-input>
TypeScript
export class HomePage {
rating: number;
ratingSettings: any = {
theme: "ios",
display: "bottom"
};
}
- View demos and other examples for the Rating.
Scroller
HTML
<ion-label>Scroller</ion-label>
<ion-input [(ngModel)]="scroller" mbsc-scroller [mbsc-options]="scrollerSettings"></ion-input>
TypeScript
export class AppComponent {
scrollerSettings = {
showLabel: true,
theme: "ios",
display: "bottom",
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
<ion-label>Timer</ion-label>
<ion-input [(ngModel)]="timer" mbsc-timer [mbsc-options]="timerSettings"></ion-input>
TypeScript
export class HomePage {
timer: number;
timerSettings: any = {
theme: "ios",
display: "bottom"
};
}
- View demos and other examples for the Timer.
Timespan
HTML
<ion-label>Timespan</ion-label>
<ion-input [(ngModel)]="timespan" mbsc-timespan [mbsc-options]="timespanSettings"></ion-input>
TypeScript
export class HomePage {
timespan: number;
timespanSettings: any = {
theme: "ios",
display: "bottom"
};
}
- 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
export class HomePage {
treelist: string;
listSettings: any = {
placeholder: 'Please Select ...',
theme: "ios",
display: "bottom"
}
}
- View demos and other examples for the Treelist.
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
export class HomePage {
widgettSettings: any = {
theme: "ios",
display: "bottom"
};
}
- View demos and other examples for the Widget.
What's next?
- For customization options and API settings browse the Mobiscroll for Angular docs.
- For instructions on how to use Mobiscroll with Ionic Pro read this guide.