Skip to main content
All CollectionsTraining and guides
Initializing controls in Angular
Initializing controls in Angular

You'll find examples for how to initialize controls with the Mobiscroll Angular API

Gabi Nagy avatar
Written by Gabi Nagy
Updated over a week ago

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'demo-app',
  templateUrl: './app.component.html',
  moduleId: module.id
})
export class AppComponent {}

What's next?

Did this answer your question?