Initializing controls in Ionic 2/3

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.

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.