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.

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.