For examples in a plain Angular app see this other article.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

What's next?

Did this answer your question?