General Calendar Cards Color Date & Time Event Calendar Forms Grid Layout Image Listview Measurement Navigation Number Numpad Option List Page Popup Range Scroller Scrollview Select Timer Timespan Treelist Tools Accessibility

Forms

About

The form component adds styling to standard html form elements (textboxes, textareas, selects, checkboxes, radio buttons, submit buttons) giving them a native like look and feel on various platforms.

Initialization

Here is an example for the forms component
import { MbscFormOptions } from '../lib/mobiscroll/js/mobiscroll.angular.min.js';

@Component({
    selector: 'my-example',
    template: `<mbsc-form [options]="options">
        <mbsc-input>
            Username
        </mbsc-input>
        <mbsc-input type="password">
            Password
        </mbsc-input>
        <mbsc-button>Sign In</mbsc-button>
    </mbsc-form>`
})
export class MyExampleComponent {
    options: MbscFormOptions = {
        theme: 'ios'
    };
}
Please note! Form elements must be wrapped into an <mbsc-form></mbsc-form> component (like in the example above). Without the <mbsc-form> component other mobiscroll form components won't work!

Passing event handlers

When passing event handlers inline, the instance of the component becomes the inst property of the event object.

Passing inline event handlers
<mbsc-form (onInit)="init()"></mbsc-form>
<!-- with default parameters -->
<mbsc-form (onInit)="initDefaultEvent($event)"></mbsc-form>
<!-- with additional parameters -->
<mbsc-form (onInit)="initAdditionalEvent($event, 'myAddition')"></mbsc-form>
export class MyExampleClass {
    // simple handler without any parameters
    init() {
        console.log('simple handler'); // prints 'simple handler'
    }

    // event handler with the default event parameter
    initDefaultEvent(event: any) {
        console.log(event, event.inst); // prints the event object and the mobiscroll form control instance
    }

    // event handler with additional parameters
    initAdditionalEvent(event: any, addition: string) {
        console.log(addition); // prints 'myAddition'
    }
}

Using with Ionic

The Form components can be used tha same way with Ionic, as any other angular component.

Modules

The MbscFormsModule can be used to import all the directives and components from below.

Components

Component Description
<mbsc-form> Form component

Options

Name Type Default value Description
context String or HTMLElement 'body' Context in which mobiscroll is appended and positioned (if not inline). Can be a selector string or a DOM element.
inputStyle String 'underline' Defines the input rendering mode. By default the input has the underline styling. Possible values:
  • 'underline'
  • 'box'
  • 'outline'
labelStyle String undefined Defines the position of the label. The default label style depends on the theme option. With the 'ios' theme the inputs have inline labels, with 'mobiscroll', 'material' and 'windows' themes the default label position is stacked. Possible values:
  • 'stacked'
  • 'inline'
  • 'floating'
theme String undefined Sets the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform. If the theme for the specific platform is not present, it will revert to the Mobiscroll theme.

Supplied themes:
  • 'ios' - new iOS 7, 8, 9 theme
  • 'material' - Material theme (Android 5.x)
  • 'material-dark' - Material dark theme (Android 5.x)
  • 'mobiscroll' - Mobiscroll theme
  • 'mobiscroll-dark' - Mobiscroll Dark theme
  • 'windows' - Windows theme
  • 'windows-dark' - Windows theme (dark version)
It's possible to modify theme colors or create custom themes.
Make sure that the theme you set is included in the downloaded package.

Events

Name Description
onInit(event, inst) Triggered when the component is initialized.

Parameters

  • event: Object - The event object.
  • inst: Object - The instance object of the forms.

Example

export class MyExample {
    settings: any = {
        onInit: (event, inst) => {
        }
    }
}

Methods

Name Description
getInst() Returns the object instance.

Returns: Object

  • The object instance.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.getInst();
option(options) Sets one or more options for the component.

Parameters

  • options: Object - A map of option-value pairs to set.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.option({
    display: 'bottom',
    lang: 'de'
});
refresh() Initialize dynamically added form elements.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.refresh();
tap(el, handler) Attaches the handler function to the tap event of element el.

Parameters

  • el: Object - The element with tap event.
  • handler: Function - If the action was initiated with touch event, handler is called on touchend, otherwise on click.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });

Localization

Name Type Default value Description
lang String 'en-US' Language of the component. Based on the language string the component loads the language based default settings from the language modules.
Supported languages:
  • Arabic: 'ar'
  • Bulgarian: 'bg'
  • Catalan: 'ca'
  • Czech: 'cs'
  • Chinese: 'zh'
  • Croatian: 'hr'
  • Danish: 'da'
  • Dutch: 'nl'
  • English: 'en' or 'en-US' or undefined
  • English (UK): 'en-UK' or 'en-GB'
  • Farsi: 'fa'
  • German: 'de'
  • Greek: 'el'
  • Spanish: 'es'
  • Finnish: 'fi'
  • French: 'fr'
  • Hebrew: 'he'
  • Hindi: 'hi'
  • Croatian: 'hr'
  • Hungarian: 'hu'
  • Italian: 'it'
  • Japanese: 'ja'
  • Korean: 'ko'
  • Lithuanian: 'lt'
  • Norwegian: 'no'
  • Polish: 'pl'
  • Portuguese (Brazilian): 'pt-BR'
  • Portuguese (European): 'pt-PT'
  • Romanian: 'ro'
  • Russian: 'ru'
  • Russian (UA): 'ru-UA'
  • Slovak: 'sk'
  • Serbian: 'sr'
  • Thai: 'th'
  • Swedish: 'sv'
  • Turkish: 'tr'
  • Ukrainian: 'ua'
  • Vietnamese: 'vi'
offText String 'Off' Text of the switch button when it's turned off, only for Android Holo switch.
onText String 'On' Text of the switch button when it's turned on, only for Android Holo switch.
rtl Boolean false Right to left display.

Validation

There are two approaches to creating forms and validating them in angular: Reactive Forms and the Template Driven Forms.

The mobiscroll form components can be used with either of them. Here will follow examples on how to use these validation patterns.

In angular form validation is done with the help of FormGroup, FormControl, Validation classes (to only name a few of them) and various directives. Depending on witch approach we take these are used differently.

Template driven validation

1. Step: Simple form

With template driven validation, we can set up the whole validation in the template of our component using directives. Here is a simple form with two inputs and a button:

<mbsc-form>
    <form #frm="ngForm" novalidate (ngSubmit)="logIn()">
        <mbsc-input name="user" [(ngModel)]="username">User</mbsc-input>
        <mbsc-input name="pass" [(ngModel)]="password" type="password">Password</mbsc-input>
        <mbsc-button type="submit">Log in</mbsc-button>
    </form>
</mbsc-form>
For the validation to work, we will need to import the FormsModule from '@angular/forms' and add it to our NgModule imports.

The #frm="ngForm" template variable will hold the FormGroup. We can later check if the form is valid through this variable.

The FormControl component will make the validation happen for the fields, but we don't see it in the template. The [(ngModel)]="username" and [(ngModel)]="password" directives will setup the FormControls for the fields automatically in the background.

2. Step: Rules

Let's add some validation constraints:

<mbsc-form>
    <form #frm="ngForm" novalidate (ngSubmit)="logIn()">
        <mbsc-input name="user" [(ngModel)]="username" required>User</mbsc-input>
        <mbsc-input name="pass" [(ngModel)]="password" type="password" required minlength="6">Password</mbsc-input>
        <mbsc-button type="submit" [disabled]="frm.invalid">Log in</mbsc-button>
    </form>
</mbsc-form>

The required and minlength directives, as their name suggest, will make the fields required and give the password the minimum 6 charachters long rule.

Passing the disabled attribute to the login button, will prevent submitting the form until it's valid.

3. Step: Error state

At this stage, the validation is set up, and form works but there are no messages shown to the user. Here we can take advantage of the mobiscroll components [error] and [errorMessage] attributes.

We could set the error state to appear through the FormGroup component, but that would mean a very long expressions to type in:

[error]="frm.form.controls.user?.dirty && frm.form.controls.user?.invalid"

To make the long expressions short we can set a template variable to each fields FormControl and access their states through them:

<mbsc-form>
    <form #frm="ngForm" novalidate (ngSubmit)="logIn()">
        <mbsc-input name="user" [(ngModel)]="username" required #user="ngModel" [error]="user.touched && user.dirty && user.invalid" errorMessage="Required">User</mbsc-input>
        <mbsc-input name="pass" [(ngModel)]="password" type="password" required minlength="6" #pass="ngModel" [error]="pass.touched && pass.dirty && pass.invalid">Password</mbsc-input>
        <mbsc-button type="submit" [disabled]="frm.invalid">Log in</mbsc-button>
    </form>
</mbsc-form>

4. Step: Error messages

To give each error and field a proper error message, we can set up a message object in our component:

export class TemplateDriven {

    errorMessages = {
        user: {
            required: 'Username required'
        },
        pass: {
            required: 'Password required',
            minlength: 'Invalid, should be at least 6 chars long'
        }
    }

    getError(ctrl: NgControl): string {
        var message = '';
        if (ctrl.errors) {
            for(var err in ctrl.errors) {
                if (ctrl.errors[err]) {
                    message = this.errorMessages[ctrl.name][err];
                }
            }
        }
        return message;
    }

And then in the form set the error message:

<mbsc-form>
    <form #frm="ngForm" novalidate (ngSubmit)="logIn()">
        <mbsc-input name="user" [(ngModel)]="username" required #user="ngModel" [error]="user.touched && user.dirty && user.invalid" [errorMessage]="getError(user)">User</mbsc-input>
        <mbsc-input name="pass" [(ngModel)]="password" type="password" required minlength="6" #pass="ngModel" [error]="pass.touched && pass.dirty && pass.invalid" [errorMessage]="getError(pass)">Password</mbsc-input>
        <mbsc-button type="submit" [disabled]="frm.invalid">Log in</mbsc-button>
    </form>
</mbsc-form>

Reactive Forms

When taking the reactive forms approach, we create our own FormGroup and FormControl in code, and validate the form accordingly.

In order for the reactive forms approach work, the ReactiveFormsModule needs to be imported and added to the NgModule imports!

1. Step: The simple form

<mbsc-form>
    <form [formGroup]="frm" novalidate>
        <mbsc-input formControlName="user">User</mbsc-input>
        <mbsc-input formControlName="pass" type="password">Password</mbsc-input>
        <mbsc-button type="submit" [disabled]="frm.invalid">Log in</mbsc-button>
    </form>
</mbsc-form>

For this to work, we will have to create a frm property in our component. We will use the FormBuilder to construct our form:

import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';

@Component({ // ... })
export class ReactiveForms implements OnInit {
    frm: FormGroup;

    constructor(private builder: FormBuilder) {}

    ngOnInit() {
        this.frm = this.builder.group({
            user: '',
            pass: ''
        });
    }
}

The formControlName directive will make sure the input is matched with the correct field in the FormGroup.

2. Step: Rules

In the case of reactive forms, the rules are defined in the typescript code, by importing the Validators. The FormBuilder can take more validators for a field:

export class ReactiveForms implements OnInit {
    frm: FormGroup;

    constructor(private builder: FormBuilder) {}

    ngOnInit() {
        this.frm = this.builder.group({
            user: ['', Validators.required],
            pass: ['', [Validators.required, Validators.minLength(6)]]
        });
    }
}

Here, the required validator is added to both user and pass fields, and the minLength validators with the parameter 6 is added to the pass field.

3. Step: Error state

At this stage the validation is set up and works. We need to add the error states to the field, to mark them invalid for the users.

To not have long expressions we can create helper methods in the component that get the FormControl for us:

export class ReactiveForms implements OnInit {
    frm: FormGroup;

    constructor(private builder: FormBuilder) {}

    ngOnInit() {
        this.frm = this.builder.group({
            user: ['', Validators.required],
            pass: ['', [Validators.required, Validators.minLength(6)]]
        });
    }

    get user() {
        return this.frm.get('user');
    }
    get pass() {
        return this.frm.get('pass');
    }
}

Then in the template we can mark the fields as invalid:

<mbsc-form>
    <form [formGroup]="frm" novalidate>
        <mbsc-input formControlName="user" [error]="user.touched && user.dirty && user.invalid">User</mbsc-input>
        <mbsc-input formControlName="pass" type="password" [error]="pass.touched && pass.dirty && pass.invalid">Password</mbsc-input>
        <mbsc-button type="submit" [disabled]="frm.invalid">Log in</mbsc-button>
    </form>
</mbsc-form>

4. Step: Error messages

To give each error and field a proper error message, we can set up a message object in our component:

export class ReactiveForms implements OnInit {
    frm: FormGroup;

    constructor(private builder: FormBuilder) {}

    ngOnInit() {
        this.frm = this.builder.group({
            user: ['', Validators.required],
            pass: ['', [Validators.required, Validators.minLength(6)]]
        });
    }

    get user() {
        return this.frm.get('user');
    }
    get pass() {
        return this.frm.get('pass');
    }

    errorMessages = {
        user: {
            required: 'Username required'
        },
        pass: {
            required: 'Password required',
            minlength: 'Invalid, should be at least 6 chars long'
        }
    }

    getError(field: string): string {
        var ctrl = this.frm.get(field);
        var message = '';
        if (ctrl.errors) {
            for(var err in ctrl.errors) {
                if (ctrl.errors[err]) {
                    message = this.errorMessages[field][err];
                }
            }
        }
        return message;
    }
}

And in the template:

<mbsc-form>
    <form [formGroup]="frm" novalidate>
        <mbsc-input formControlName="user" [error]="user.touched && user.dirty && user.invalid" [errorMessage]="getError('user')">User</mbsc-input>
        <mbsc-input formControlName="pass" type="password" [error]="pass.touched && pass.dirty && pass.invalid" [errorMessage]="getError('pass')">Password</mbsc-input>
        <mbsc-button type="submit" [disabled]="frm.invalid">Log in</mbsc-button>
    </form>
</mbsc-form>

Validation in Ionic

In ionic we use the angular framework given tools and techniques for form validation. There are two approaches to form validation as we described in short: Reactive Forms and the Template Driven Forms.

In the next section we will show an example for form validation with an ionic form using the reactive forms approach. We will also use a mobiscroll date picker and a custom validator.

1. Step: Simple form and rules

We will create a simple register form, with three ion-input field: email, password and birthday.

<ion-content>
    <form [formGroup]="form">
        <ion-item>
            <ion-label>Email</ion-label>
            <ion-input formControlName="email" type="email" placeholder="Enter a valid email"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>Password</ion-label>
            <ion-input formControlName="password" type="password" placeholder="Min 6 characters"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>Birthday</ion-label>
            <ion-input mbsc-date formControlName="birthday" placeholder="Select your birthday"></ion-input>
        </ion-item>
    </form>
</ion-content>
For the validation to work, we will need to import the ReactiveFormsModule from '@angular/forms' and add it to our NgModule imports.

We will have to create a form property in our component. We will use the FormBuilder to construct our form:

import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';

@Component({ // ... })
export class ReactiveForms implements OnInit {
    form: FormGroup;

    constructor(private builder: FormBuilder) {}

    ngOnInit() {
        this.form = this.builder.group({
            email: ['', [Validators.email]],
            password: ['', [Validators.required, Validators.minLength(6)]],
            birthday: null
        });
    }
}

The formControlName directive will make sure the input is matched with the correct field in the FormGroup. We also use the standard validators for the email and password the framework provides.

2. Step: Custom validator

The custom validator we are going to create is simply a function, that takes a formControl as parameter and checks if its value is a Date at least 18 years ago. We can define it in another file (ex. age.ts) and import it from there.

import { FormControl } from '@angular/forms';

export function ageValidator(ctrl: FormControl): any {
    if (ctrl.value === null || ctrl.value === undefined) {
        return {
            "required": true
        };
    }

    if (!(ctrl.value instanceof Date)) {
        return {
            "invalidDate": true
        };
    }

    var now = new Date();
    var earlier18 = new Date(now.getFullYear() - 18, now.getMonth(), now.getDate());
    
    if (ctrl.value > earlier18) {
        return {
            "minAge": true
        };
    }
}

We need to add the validator to the birthday formControl we created earlier

The component code will look like this:

import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { ageValidator } from './age'; // if the file name was age.ts

@Component({ // ... })
export class ReactiveForms implements OnInit {
    form: FormGroup;

    constructor(private builder: FormBuilder) {}

    ngOnInit() {
        this.form = this.builder.group({
            email: ['', [Validators.email]],
            password: ['', [Validators.required, Validators.minLength(6)]],
            birthday: [null, ageValidator]
        });
    }
}

3. Step: Error state

At this stage the validation is set up and works. We need to add the error states to the field, to mark them invalid for the users. To do this in ionic we need to define some styles that will alert the user that the ion-input field is invalid.

The ion-input defines a series of SASS variables for this purposes. We will use the $text-input-highlight-color-invalid: red; rule and add it to the app.scss in our app.

4. Step: Error messages

We will add the following error messages to show up, when the fields are dirty (the user write in them) and invalid using the ngIf directive:

<ion-content>
    <form [formGroup]="form">
        <ion-item>
            <ion-label>Email</ion-label>
            <ion-input formControlName="email" type="email" placeholder="Enter a valid email"></ion-input>
        </ion-item>
        <ion-item *ngIf="form.controls.email.dirty && form.controls.email.invalid">
            <p *ngIf="form.controls.email.errors.required">Email required</p>
            <p *ngIf="form.controls.email.errors.email">Invalid email</p>
        </ion-item>
        <ion-item>
            <ion-label>Password</ion-label>
            <ion-input formControlName="password" type="password" placeholder="Min 6 characters"></ion-input>
        </ion-item>
        <ion-item *ngIf="form.controls.password.dirty && form.controls.password.invalid">
            <p *ngIf="form.controls.password.errors.required">Required</p>
            <p *ngIf="form.controls.password.errors.minlength">Has to be at least 6 characters long</p>
        </ion-item>
        <ion-item>
            <ion-label>Birthday</ion-label>
            <ion-input formControlName="birthday" placeholder="Select your birthday" mbsc-date></ion-input>
        </ion-item>
        <ion-item *ngIf="form.controls.birthday.dirty && form.controls.birthday.invalid">
            <p *ngIf="form.controls.birthday.errors.required">Birthday required</p>
            <p *ngIf="form.controls.birthday.errors.invalidDate">Invalid birthday</p>
            <p *ngIf="form.controls.birthday.errors.minAge">You need to be at least 18 years old</p>
        </ion-item>
    </form>
</ion-content>

Textfields

Textbox

Basic usage
<mbsc-input>Username</mbsc-input>
<mbsc-input [(ngModel)]="userName">Username</mbsc-input>
Without label
<mbsc-input placeholder="Username"></mbsc-input>
Detecting change
<!-- change on blur -->
<mbsc-input (change)="myChangeHandler()">Username</mbsc-input>

<!-- each input -->
<mbsc-input (input)="myInputHandler()">Username</mbsc-input>
With invalid styling
<mbsc-input [error]="true" errorMessage="Text not valid">
    Username
</mbsc-input>
With invalid styling and dynamic message
<mbsc-input [error]="isMyTextInvalid" [errorMessage]="myErrorMessage">
    Username
</mbsc-input>

Icons

With left icon
<mbsc-input icon="ion-ios7-email">
    Email
</mbsc-input>
With right icon
<mbsc-input icon="ion-ios7-email" icon-align="right">
    Email
</mbsc-input>

Input style

This attribute can be used for customizing your form input rendering.

Underline input style
<mbsc-input input-style="underline">
    Username
</mbsc-input>
Box input style
<mbsc-input input-style="box">
    Username
</mbsc-input>
Outline input style
<mbsc-input input-style="outline">
    Username
</mbsc-input>

Label style

With this attribute you can define the position of the label.

Stacked label style
<mbsc-input label-style="stacked">
    Username
</mbsc-input>
Inline label style
<mbsc-input label-style="inline">
    Username
</mbsc-input>
Floating label style
<mbsc-input label-style="floating">
    Username
</mbsc-input>

Password

The password toggle can be used to hide or show the entered password using icons

Without toggle
<mbsc-input type="password" placeholder="Password"></mbsc-input>

<!-- bound to a variable with ngModel -->
<mbsc-input type="password" placeholder="Password" [(ngModel)]="myPassword"></mbsc-input>
    
<!-- with change events -->
<mbsc-input type="password" placeholder="Password" (change)="myPasswordChanged()"></mbsc-input>
<mbsc-input type="password" placeholder="Password" (input)="myPasswordChanged()"></mbsc-input>
With icons
<mbsc-input type="text" placeholder="Password" [password-toggle]="true"></mbsc-input>
With custom icons
<mbsc-input type="text" placeholder="Password" [password-toggle]="true" icon-show="my-show-icon" icon-hide="my-hide-icon"></mbsc-input>

File upload input

You can change the file type input icon with the data-upload attribute.

File type input with icon
<mbsc-input type="file" placeholder="Select file..." icon-upload="cloud-upload">Upload</mbsc-input>

Textarea

Textareas will auto-grow based on the entered content up until to 10 lines. After 10 lines scroll is enabled.

Basic usage
<mbsc-textarea>
    About me
</mbsc-textarea>
Without label
<mbsc-textarea placeholder="About me">
</mbsc-textarea>

Using with Ionic

The textfield components can be used tha same way with Ionic, as any other angular component.

Attributes

Name Description
icon Specify icons for a form component. A font-icon name should be passed.

Icon alignment can be controlled with the icon-align attribute. Icons can be displayed on both sides by passing and object with left and right properties containing icon names, e.g.: icon='{ "right": "plus", "left": "minus" }'. You can build your custom icon set on our download page ("Choose Icon Set" section).

See the full list of available icons here.

The default icon pack contains the following icons:
  • home
  • pencil
  • office
  • newspaper
  • droplet
  • image2
  • camera
  • play
  • bullhorn
  • connection
  • library
  • book
  • file4
  • copy2
  • copy3
  • stack
  • folder
  • tag
  • cart
  • support
  • phone
  • location
  • credit
  • map
  • history
  • clock
  • alarm2
  • stopwatch
  • calendar
  • mobile
  • drawer
  • undo2
  • redo2
  • forward
  • reply
  • bubble
  • bubbles
  • disk
  • download
  • upload
  • user4
  • key2
  • lock2
  • unlocked
  • cogs
  • aid
  • bars
  • cloud-download
  • cloud-upload
  • globe
  • airplane
  • earth
  • link
  • flag
  • eye
  • eye-blocked
  • attachment
  • star3
  • heart
  • thumbs-up
  • thumbs-up2
  • smiley2
  • sad2
  • checkmark
  • close
  • plus
  • minus
  • remove
  • loop2
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
icon-align Specify icon alignment. It can be "left" or "right", it defaults to "left" if not specified.
icon-hide Specify icon for hide password. It can be any valid icon name, it defaults to "eye-blocked" if not specified.
icon-show Specify icon for show password. It can be any valid icon name, it defaults to "eye" if not specified.
icon-upload Specify icon for file type input. It can be any valid icon name, it defaults to "upload" if not specified.
input-style Defines the input rendering mode. Possible values: "underline", "box", "outline".
label-style Defines the position of the label. Possible values: "stacked", "inline", "floating".
[password-toggle] If the input of a password field has the data-password-toggle="true" attribute, the visibility of the password can be toggled.
[disabled] If an element has the disabled attribute, the element will be disabled.
[name] Name attribute for the text field.
[placeholder] Placeholder for the field
[error] When true, the text field will be rendered with invalid styling
[errorMessage] The error message, that will be shown when the field is invalid.
[readonly] If an element has the readonly attribute, the element won't change it's value on user input.

Icons

With left icon
<mbsc-textarea icon="line-note">
    About me
</mbsc-textarea>
With right icon
<mbsc-textarea icon="line-note" icon-align="right">
    About me
</mbsc-textarea>

Input style

This attribute can be used for customizing your form input rendering.

Underline input style
<mbsc-textarea input-style="underline">
    About me
</mbsc-textarea>
Box input style
<mbsc-textarea input-style="box">
    About me
</mbsc-textarea>
Outline input style
<mbsc-textarea input-style="outline">
    About me
</mbsc-textarea>

Label style

With this attribute you can define the position of the label.

Stacked label style
<mbsc-textarea label-style="stacked">
    About me
</mbsc-textarea>
Inline label style
<mbsc-textarea label-style="inline">
    About me
</mbsc-textarea>
Floating label style
<mbsc-textarea label-style="floating">
    About me
</mbsc-textarea>

Select

With label
<mbsc-dropdown label="Choose one">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</mbsc-dropdown>
With dynamic options
<mbsc-dropdown label="Choose one">
    <option *ngFor="let opt of myOptions" [value]="opt.value" >{{opt.text}}</option>
</mbsc-dropdown>

Using with Ionic

The dropdown component can be used tha same way with Ionic, as any other angular component.

Attributes

Name Description
icon Specify icons for a form component. A font-icon name should be passed.

Icon alignment can be controlled with the icon-align attribute. Icons can be displayed on both sides by passing and object with left and right properties containing icon names, e.g.: icon='{ "right": "plus", "left": "minus" }'. You can build your custom icon set on our download page ("Choose Icon Set" section).

See the full list of available icons here.

The default icon pack contains the following icons:
  • home
  • pencil
  • office
  • newspaper
  • droplet
  • image2
  • camera
  • play
  • bullhorn
  • connection
  • library
  • book
  • file4
  • copy2
  • copy3
  • stack
  • folder
  • tag
  • cart
  • support
  • phone
  • location
  • credit
  • map
  • history
  • clock
  • alarm2
  • stopwatch
  • calendar
  • mobile
  • drawer
  • undo2
  • redo2
  • forward
  • reply
  • bubble
  • bubbles
  • disk
  • download
  • upload
  • user4
  • key2
  • lock2
  • unlocked
  • cogs
  • aid
  • bars
  • cloud-download
  • cloud-upload
  • globe
  • airplane
  • earth
  • link
  • flag
  • eye
  • eye-blocked
  • attachment
  • star3
  • heart
  • thumbs-up
  • thumbs-up2
  • smiley2
  • sad2
  • checkmark
  • close
  • plus
  • minus
  • remove
  • loop2
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
icon-align Specify icon alignment. It can be "left" or "right", it defaults to "left" if not specified.
[label] Label for the dropdown.
[disabled] If an element has the disabled attribute, the element will be disabled.
[readonly] If an element has the readonly attribute, the element won't change it's value on user input.
input-style Defines the input rendering mode. Possible values: "underline", "box", "outline".
label-style Defines the position of the label. Possible values: "stacked", "inline", "floating".
[name] Name attribute for the dropdown.
[error] When true, the dropdown will be rendered with invalid styling
[errorMessage] The error message, that will be shown when the field is invalid.

Icons

With left icon
<mbsc-dropdown label="Choose one" icon="line-note">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</mbsc-dropdown>
With right icon
<mbsc-dropdown label="Choose one" icon="line-note" icon-align="right">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</mbsc-dropdown>

Input style

This attribute can be used for customizing your form input rendering.

Underline input style
<mbsc-dropdown label="Choose one" input-style="underline">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</mbsc-dropdown>
Box input style
<mbsc-dropdown label="Choose one" input-style="box">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</mbsc-dropdown>
Outline input style
<mbsc-dropdown label="Choose one" input-style="outline">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</mbsc-dropdown>

Label style

With this attribute you can define the position of the label.

Stacked label style
<mbsc-dropdown label="Choose one" label-style="stacked">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</mbsc-dropdown>
Inline label style
<mbsc-dropdown label="Choose one" label-style="inline">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</mbsc-dropdown>
Floating label style
<mbsc-dropdown label="Choose one" label-style="floating">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</mbsc-dropdown>

Checkbox

Basic usage
<mbsc-checkbox [(ngModel)]="agree">
    I agree
</mbsc-checkbox>
With description
<mbsc-checkbox [(ngModel)]="agree">
    I agree
    <span class="mbsc-desc">Sample description</span>
</mbsc-checkbox>

Using with Ionic

The Checkbox component can be used tha same way with Ionic, as any other angular component.

Attributes

Name Description
[(value)] Gets and sets the checked state of the checkbox when used without the [(ngModel)] directive.
[disabled] If the component has the disabled attribute, it will be disabled.
[name] Sets the name attribute of the element.
color Sets the color preset of the checkbox. Can be one of "primary", "secondary", "success", "warning", "danger" or "info"

Switch

Switches are bascially also checkboxes, but with a different style.

Basic usage
<mbsc-switch [(ngModel)]="agree">
    I agree
</mbsc-switch>
With description
<mbsc-switch [(ngModel)]="agree">
    I agree
    <span class="mbsc-desc">Sample description</span>
</mbsc-switch>

Using with Ionic

The Switch component can be used the same way with Ionic, as any other angular component.

Attributes

Name Description
[(value)] Gets and sets the checked state of the switch when used without the [(ngModel)] directive.
[disabled] If the component has the disabled attribute, it will be disabled.
[name] Sets the name attribute of the element.
color Sets the color preset of the switch. Can be one of "primary", "secondary", "success", "warning", "danger" or "info"

Methods

Name Description
getVal() Returns the state of the switch (true/false).

Returns: Boolean

  • The state of the switch value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.getVal();
setVal(value) Sets the state of the switch (true/false).

Parameters

  • value: Boolean - The state of the switch value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.setVal(false);

Radio Buttons

<mbsc-radio-group [(ngModel)]="myRadio">
    <mbsc-radio value="1">
        Option 1
        <span class="mbsc-desc">Description 1</span>
    </mbsc-radio>
    <mbsc-radio value="2">
        Option 2
        <span class="mbsc-desc">Description 2</span>
    </mbsc-radio>
    <mbsc-radio value="3">
        Option 3
        <span class="mbsc-desc">Description 3</span>
    </mbsc-radio>
</mbsc-radio-group>
<mbsc-radio-group [(ngModel)]="myRadio" name="myGroupName" color="danger">
    <mbsc-radio value="1">Option 1</mbsc-radio>
    <mbsc-radio value="2" disabled="true">Option 2</mbsc-radio>
    <mbsc-radio value="3">Option 3</mbsc-radio>
</mbsc-radio-group>

Using with Ionic

The Radio Button components can be used tha same way with Ionic, as any other angular component.

Attributes

mbsc-radio-group

Name Description
[(value)] Gets and sets the value of the radio group when used without the [(ngModel)] directive.
[name] Sets the name of the radio group. It will be generated, when not specified.
color Sets the color preset of the radio group. Can be one of "primary", "secondary", "success", "warning", "danger" or "info"

mbsc-radio

Name Description
[value] Specify the value, which is going to be set when the radio is selected
[disabled] If the component has the disabled attribute, it will be disabled.

Buttons

The buttons come in several shapes, sizes and colors. Use the click events for attaching myClicks to it and see the examples below for the various renderings.

Simple button
<mbsc-button (click)="myClick()">Button</mbsc-button>
With icon
<mbsc-button icon="plus" (click)="myClick()">Text & Icon</mbsc-button>
Icon button
<mbsc-button icon="plus" (click)="myClick()"></mbsc-button>
Flat button
<mbsc-button flat (click)="myClick()">Flat</mbsc-button>
Flat button with icon
<mbsc-button flat icon="arrow-left5" (click)="myClick()">Flat & Icon</mbsc-button>
Flat icon button
<mbsc-button flat icon="plus" (click)="myClick()"></mbsc-button>
Outline button
<mbsc-button outline (click)="myClick()">Flat</mbsc-button>
Full width button
<mbsc-button block (click)="myClick()">Full width Button</mbsc-button>

<mbsc-button outline block (click)="myClick()">Full width Outline button</mbsc-button>

<mbsc-button flat block (click)="myClick()">Full width Flat Button</mbsc-button>
Colored buttons
<mbsc-button color="primary" (click)="myClick()">Primary color Button</mbsc-button>
<mbsc-button color="secondary" (click)="myClick()">Secondary color Button</mbsc-button>
<mbsc-button color="success" (click)="myClick()">Success Button</mbsc-button>
<mbsc-button color="warning" (click)="myClick()">Warning Button</mbsc-button>
<mbsc-button color="danger" (click)="myClick()">Danger Button</mbsc-button>
<mbsc-button color="info" (click)="myClick()">Info Button</mbsc-button>
<mbsc-button color="light" (click)="myClick()">Light Button</mbsc-button>
<mbsc-button color="dark" (click)="myClick()">Dark Button</mbsc-button>
Button group
<div class="mbsc-btn-group">
    <mbsc-button (click)="myClick()">Button 1</mbsc-button>
    <mbsc-button (click)="myClick()">Button 2</mbsc-button>
    <mbsc-button (click)="myClick()">Button 3</mbsc-button>
</div>
Justified button group
<!-- Buttons are streched to fill the full width of the container.-->
<div class="mbsc-btn-group-justified">
    <mbsc-button (click)="myClick()">Button 1</mbsc-button>
    <mbsc-button (click)="myClick()">Button 2</mbsc-button>
    <mbsc-button (click)="myClick()">Button 3</mbsc-button>
</div>
Full width button group
<!-- Each button fills the whole width of the container. -->
<div class="mbsc-btn-group-block">
    <mbsc-button (click)="myClick()">Button 1</mbsc-button>
    <mbsc-button (click)="myClick()">Button 2</mbsc-button>
    <mbsc-button (click)="myClick()">Button 3</mbsc-button>
</div>

Using with Ionic

The Button component can be used tha same way with Ionic, as any other angular component.

Attributes

Name Description
icon Specify an icon for the button. A font-icon name should be passed.

You can build your custom icon set on our download page ("Choose Icon Set" section).

See the full list of available icons here.

The default icon pack contains the following icons:
  • home
  • pencil
  • office
  • newspaper
  • droplet
  • image2
  • camera
  • play
  • bullhorn
  • connection
  • library
  • book
  • file4
  • copy2
  • copy3
  • stack
  • folder
  • tag
  • cart
  • support
  • phone
  • location
  • credit
  • map
  • history
  • clock
  • alarm2
  • stopwatch
  • calendar
  • mobile
  • drawer
  • undo2
  • redo2
  • forward
  • reply
  • bubble
  • bubbles
  • disk
  • download
  • upload
  • user4
  • key2
  • lock2
  • unlocked
  • cogs
  • aid
  • bars
  • cloud-download
  • cloud-upload
  • globe
  • airplane
  • earth
  • link
  • flag
  • eye
  • eye-blocked
  • attachment
  • star3
  • heart
  • thumbs-up
  • thumbs-up2
  • smiley2
  • sad2
  • checkmark
  • close
  • plus
  • minus
  • remove
  • loop2
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
[disabled] If the element has the disabled attribute, it will be disabled.
[flat] If the element has the flat attribute, it will be rendered with flat styling.
[block] If the element has the block attribute, it will fill the full width of the container.
color Sets the color preset of the button. Can be one of "primary", "secondary", "success", "warning", "danger" or "info"

Slider

The slider control can be used to select one or more numeric value.

Simple slider
<mbsc-slider [(ngModel)]="mySlide">
    Label
</mbsc-slider>
Slider with tooltip
<mbsc-slider tooltip="true" [(ngModel)]="mySlide">
    Label
</mbsc-slider>
With value and template
<mbsc-slider val="left" template="{value}/{max}" [(ngModel)]="mySlide">
    Label 
</mbsc-slider>
With steps and step labels
<mbsc-slider tooltip="true" step="25" step-labels="[0, 25, 50, 75, 100]" [(ngModel)]="mySlide">
    Label
</mbsc-slider>
With icon and value
<mbsc-slider icon="plus" min="22" step="10" max="119" val="right" template="${value}" [(ngModel)]="mySlide">
    Icon and value
</mbsc-slider>

If the bound value is an array of numbers, multiple handles will be displayed, based on the array's length

Multiple handles
<mbsc-slider [(value)]="myRange" >
    Two handles
</mbsc-slider>
Multiple handles with ngModel
<mbsc-slider [(ngModel)]="myrange" >
    Two handles
</mbsc-slider>

Using with Ionic

The Slider component can be used tha same way with Ionic, as any other angular component.

Attributes

Name Description
highlight If an input has the highlight="false" attribute, only the handles are highlighted and the progress bar is not.
icon Specify icons for the slider. A font-icon name should be passed.

Icons can be displayed on both sides by passing and object with left and right properties containing icon names, e.g.: icon='{ "right": "plus", "left": "minus" }'. You can build your custom icon set on our download page ("Choose Icon Set" section).

See the full list of available icons here.

The default icon pack contains the following icons:
  • home
  • pencil
  • office
  • newspaper
  • droplet
  • image2
  • camera
  • play
  • bullhorn
  • connection
  • library
  • book
  • file4
  • copy2
  • copy3
  • stack
  • folder
  • tag
  • cart
  • support
  • phone
  • location
  • credit
  • map
  • history
  • clock
  • alarm2
  • stopwatch
  • calendar
  • mobile
  • drawer
  • undo2
  • redo2
  • forward
  • reply
  • bubble
  • bubbles
  • disk
  • download
  • upload
  • user4
  • key2
  • lock2
  • unlocked
  • cogs
  • aid
  • bars
  • cloud-download
  • cloud-upload
  • globe
  • airplane
  • earth
  • link
  • flag
  • eye
  • eye-blocked
  • attachment
  • star3
  • heart
  • thumbs-up
  • thumbs-up2
  • smiley2
  • sad2
  • checkmark
  • close
  • plus
  • minus
  • remove
  • loop2
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
live If an input has the live="true" attribute, the value will be updated while the slider handle is moved. If live="false", the value will be updated when the handle is released.
step-labels Values to display under the slider track. Should be passed as an array, e.g. step-labels="[0, 25, 50, 75, 100]".
target Specify a target element, where the slider value will be displayed. The string should be a CSS selector, e.g. #slider_value
value-template Template for the slider value. '{value}' stands for the slider current value, and '{max}' stands for the slider maximum value. Any other character in the template will be handled as literal string.
tooltip If true, a tooltip with the current value will be displayed above the slider handle while moving.
val Specify the value position. It can be "left" or "right", it defaults to "left" if not specified.
[disabled] If an element has the disabled attribute, the element will be disabled.
max Specify the maximum value that can be selected.
min Specify the minimum value that can be selected.
step Specify the step between values.
[(value)] Specify the value of the slider.
color Sets the color preset of the slider. Can be one of "primary", "secondary", "success", "warning", "danger" or "info"

Methods

Name Description
getVal() Returns the slider value.

Returns: Number

  • The slider value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.getVal();
setVal(value) Sets the slider value.

Parameters

  • value: Number - The slider value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.setVal(50);

Progress

The progress control can be used to display the completion progress of a task

Simple progress with label
<mbsc-progress [value]="30" max="100">
    Loading
</mbsc-progress>
With icon
<mbsc-progress [value]="50" max="100" icon="plus" icon-align="right">
</mbsc-progress>
With icons on both sides
<mbsc-progress [value]="0" max="100" icon='{ "right": "plus", "left": "minus" }'>>
    Loading
</mbsc-progress>
With value on the left
<mbsc-progress [value]="130" max="1000" val="left">>
    Loading
</mbsc-progress>
With value on the right
<mbsc-progress [value]="50" max="100" icon='{ "left": "plus" }' val="right">>
    Loading
</mbsc-progress>
With step labels
<mbsc-progress [value]="50" max="200" val="right" step-labels="[0, 25, 50, 75, 100, 125, 150, 175, 200]">>
    Loading
</mbsc-progress>

Using with Ionic

The Progress component can be used tha same way with Ionic, as any other angular component.

Attributes

Name Description
icon Specify icons for the progress. A font-icon name should be passed.

Icons can be displayed on both sides by passing and object with left and right properties containing icon names, e.g.: icon='{ "right": "plus", "left": "minus" }'. You can build your custom icon set on our download page ("Choose Icon Set" section).

See the full list of available icons here.

The default icon pack contains the following icons:
  • home
  • pencil
  • office
  • newspaper
  • droplet
  • image2
  • camera
  • play
  • bullhorn
  • connection
  • library
  • book
  • file4
  • copy2
  • copy3
  • stack
  • folder
  • tag
  • cart
  • support
  • phone
  • location
  • credit
  • map
  • history
  • clock
  • alarm2
  • stopwatch
  • calendar
  • mobile
  • drawer
  • undo2
  • redo2
  • forward
  • reply
  • bubble
  • bubbles
  • disk
  • download
  • upload
  • user4
  • key2
  • lock2
  • unlocked
  • cogs
  • aid
  • bars
  • cloud-download
  • cloud-upload
  • globe
  • airplane
  • earth
  • link
  • flag
  • eye
  • eye-blocked
  • attachment
  • star3
  • heart
  • thumbs-up
  • thumbs-up2
  • smiley2
  • sad2
  • checkmark
  • close
  • plus
  • minus
  • remove
  • loop2
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
step-labels Values to display under the progress track. Should be passed as an array, e.g. step-labels="[0, 25, 50, 75, 100]".
val Specify the value position. It can be "left" or "right", it defaults to "left" if not specified.
[disabled] If an element has the disabled attribute, the element will be disabled.
max Specify the final value of the progress.
[value] Specify the value of the progress.
color Sets the color preset of the progress. Can be one of "primary", "secondary", "success", "warning", "danger" or "info"

Methods

Name Description
getVal() Returns the progress value.

Returns: Number

  • The progress value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.getVal();
setVal(value) Sets the progress value.

Parameters

  • value: Number - The progress value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.setVal(50);

Segmented control

The segmented control is a horizontal control made of multiple segments, each segment functioning as a discrete button.

With icon
<mbsc-segmented-group name="my-group" [(ngModel)]="myChoice">
    <mbsc-segmented value="1" icon="remove"></mbsc-segmented>
    <mbsc-segmented value="2" icon="pencil"></mbsc-segmented>
    <mbsc-segmented value="3" icon="plus"></mbsc-segmented>
</mbsc-segmented-group>
With text
<mbsc-segmented-group name="my-group" [(ngModel)]="myChoice">
    <mbsc-segmented value="1">Option 1</mbsc-segmented>
    <mbsc-segmented value="2">Option 2</mbsc-segmented>
    <mbsc-segmented value="3">Option 3</mbsc-segmented>
</mbsc-segmented-group>
With icon and text
<mbsc-segmented-group name="my-group" [(ngModel)]="myChoice">
    <mbsc-segmented value="1" icon="remove">Option 1</mbsc-segmented>
    <mbsc-segmented value="2" icon="pencil">Option 2</mbsc-segmented>
    <mbsc-segmented value="3" icon="plus">Option 3</mbsc-segmented>
</mbsc-segmented-group>

When selecting multiple items, the segmented control can be bound to an array, which values will be added or removed by the segmented selection.

Multiple selection with array
myGroupItems: Array<string> = ['Option 1', 'Option 2', 'Option 3']
<mbsc-segmented-group select="multiple" name="my-group" [(ngModel)]="myGroupItems">
    <mbsc-segmented [value]="item" *ngFor="let item of myGroupItems">{{item}}</mbsc-segmented>
</mbsc-segmented-group>

Passing the [(checked)] attribute, can specify the selected state of individual segmented items.

Individual items
myGroupItems: Array<{ text: string, selected: boolean }> = [{ text: 'Option 1', selected: true }, { text: 'Option 2', selected: false }]
<mbsc-segmented-group select="multiple" name="my-group">
    <mbsc-segmented [(checked)]="item.selected" *ngFor="let item of myGroupItems">{{item.text}}</mbsc-segmented>
</mbsc-segmented-group>

Using with Ionic

The Segmented component can be used tha same way with Ionic, as any other angular component.

Attributes

mbsc-segmented-group

Name Description
[(value)] Gets and sets the value of the segmented group when used without the [(ngModel)] directive.
[name] Sets the name of the segmented group. It will be generated, when not specified.
select Sets the selection type of the segmented group. Can be single or multiple, defaults to single.
color Sets the color preset of the segmented group. Can be one of "primary", "secondary", "success", "warning", "danger" or "info"

mbsc-segmented

Name Description
[disabled] If an item has the disabled attribute, it will be disabled.
icon Specify an icon for the segmented item. A font-icon name should be passed.

You can build your custom icon set on our download page ("Choose Icon Set" section).

See the full list of available icons here.

The default icon pack contains the following icons:
  • home
  • pencil
  • office
  • newspaper
  • droplet
  • image2
  • camera
  • play
  • bullhorn
  • connection
  • library
  • book
  • file4
  • copy2
  • copy3
  • stack
  • folder
  • tag
  • cart
  • support
  • phone
  • location
  • credit
  • map
  • history
  • clock
  • alarm2
  • stopwatch
  • calendar
  • mobile
  • drawer
  • undo2
  • redo2
  • forward
  • reply
  • bubble
  • bubbles
  • disk
  • download
  • upload
  • user4
  • key2
  • lock2
  • unlocked
  • cogs
  • aid
  • bars
  • cloud-download
  • cloud-upload
  • globe
  • airplane
  • earth
  • link
  • flag
  • eye
  • eye-blocked
  • attachment
  • star3
  • heart
  • thumbs-up
  • thumbs-up2
  • smiley2
  • sad2
  • checkmark
  • close
  • plus
  • minus
  • remove
  • loop2
You can use the icons anywhere in your app using the mbsc-ic mbsc-ic-{iconName} classes, e.g.:
<div class="mbsc-ic mbsc-ic-star"></div>
[(value)] Value of the item. In single select mode, this value will be set to the model when clicked. In Multiselect mode, this value will be toggled, based on the selected state of this item.

Stepper

The stepper control lets the user adjust a value by increasing and decreasing it in small steps. Steppers are used in situations where a user needs to adjust a value by a small amount.

Simple stepper
<mbsc-stepper [(ngModel)]="myValue">
    Label
</mbsc-stepper>
Side value
<mbsc-stepper val="right" [(ngModel)]="myValue">
    Label
</mbsc-stepper>
With min, max and step
<mbsc-stepper [(value)]="myValue" min="-10" max="10" step="0.25">
    Label
</mbsc-stepper>

Using with Ionic

The Stepper component can be used tha same way with Ionic, as any other angular component.

Attributes

Name Description
val Specify the value position. It can be "left" or "right", it defaults to "left" if not specified.
[disabled] If an element has the disabled attribute, the element will be disabled.
max Specify the maximum value that can be selected.
min Specify the minimum value that can be selected.
step Specify the step between values.
[(value)] Specify the value of the stepper.
name Specify the name of the stepper element.
color Sets the color preset of the stepper. Can be one of "primary", "secondary", "success", "warning", "danger" or "info"

Rating

The rating control can be used to select one numeric value.

Simple rating
<mbsc-rating [(ngModel)]="myRating">
    Label
</mbsc-rating>
With custom icons
<mbsc-rating empty="heart2" filled="heart" [(ngModel)]="myRating">
    Label
</mbsc-rating>
With value and template
<mbsc-rating val="left" template="{value}/{max}" [(ngModel)]="myRating">
    Label 
</mbsc-rating>
With steps
<mbsc-rating step=".5" min="0" max="3" value="1.5">
    Label
</mbsc-rating>

Attributes

Name Description
empty Specify the icon for the unselected values. A font-icon name should be passed.
filled Specify the icon for the selected values. A font-icon name should be passed.
template Template for the rating value. '{value}' stands for the rating current value, and '{max}' stands for the rating maximum value. Any other character in the template will be handled as literal string.
val Specify the value position. It can be "left" or "right", it defaults to "left" if not specified.
[disabled] If an element has the disabled attribute, the element will be disabled.
[readonly] If an element has the readonly attribute, the element won't change it's value on user input.
max Specify the maximum value that can be selected.
min Specify the minimum value that can be selected.
step Specify the step between values.
[(value)] Specify the value of the rating.
name Specify the name of the rating.
color Sets the color preset of the rating. Can be one of "primary", "secondary", "success", "warning", "danger" or "info"

Methods

Name Description
getVal() Returns the rating value.

Returns: Number

  • The rating value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.getVal();
setVal(value) Sets the rating value.

Parameters

  • value: Number - The rating value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.setVal(50);

Groups

For styling the groups inside the form element you can use the mbsc-form-group, mbsc-form-group-title and mbsc-form-group-inset classes.

Attributes

Name Description
inset If the form group has an inset attribute then an inset from group will be rendered.
collapsible If the from group has this attribute the group content will be collapsible.
open If a form group has this attribute, the collapsible group content will be opened by default.
Form group
<mbsc-form-group>
    <mbsc-form-group-title>Phone</mbsc-form-group-title>
    <mbsc-form-group-content>
        <mbsc-input type="tel" placeholder="Phone" value="+12225550127">Home</mbsc-input>
        <mbsc-input type="tel" placeholder="Phone" value="+12225550128">Work</mbsc-input>
    </mbsc-form-group-content>
</mbsc-form-group>
        
Form group inset
<mbsc-form-group inset>
    <mbsc-form-group-title>Phone</mbsc-form-group-title>
    <mbsc-form-group-content>
        <mbsc-input type="tel" placeholder="Phone" value="+12225550127">Home</mbsc-input>
        <mbsc-input type="tel" placeholder="Phone" value="+12225550128">Work</mbsc-input>
    </mbsc-form-group-content>
</mbsc-form-group>
        
Form group collapsible
<mbsc-form-group collapsible>
    <mbsc-form-group-title>Phone</mbsc-form-group-title>
    <mbsc-form-group-content>
        <mbsc-input type="tel" placeholder="Phone" value="+12225550127">Home</mbsc-input>
        <mbsc-input type="tel" placeholder="Phone" value="+12225550128">Work</mbsc-input>
    </mbsc-form-group-content>
</mbsc-form-group>
        

Methods

Name Description
hide() Hides the collapsible form group content.
show() Displays the collapsible form group content.
toggle() Toggles the collapsible form group content displaying.

Notes

Provide inline feedback messages for typical user actions. The notes include several predefined colors, each serving its own semantic purpose.

Simple Note
<mbsc-page>
    <mbsc-note color="primary">This is a primary note</mbsc-note>
    <mbsc-note color="secondary">This is a secondary note</mbsc-note>
    <mbsc-note color="success">This is a success note</mbsc-note>
    <mbsc-note color="danger">This is a danger note</mbsc-note>
    <mbsc-note color="warning">This is a warning note</mbsc-note>
    <mbsc-note color="info">This is a info note</mbsc-note>
    <mbsc-note color="light">This is a light note</mbsc-note>
    <mbsc-note color="dark">This is a dark note</mbsc-note>
</mbsc-page>

Using with Ionic

The Note component can be used tha same way with Ionic, as any other angular component.

Attributes

Name Description
[color] Color of the note component. Can be 'primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark'

Accordion

Using the Accordion component, you can organize the Form group and Card collapsible elements. Accordion allows showing only one collapsible item at the same time.

Initialization

Use the <mbsc-accordion> component for initialization.

Accordion with form groups
<mbsc-accordion>
    <mbsc-form-group collapsible open>
        <mbsc-form-group-title>Title</mbsc-form-group-title>
        <mbsc-form-group-content>
            Form Group Content
        </mbsc-form-group-content>
    </mbsc-form-group>
    <mbsc-form-group collapsible>
        <mbsc-form-group-title>Title</mbsc-form-group-title>
        <mbsc-form-group-content>
            Form Group Content
        </mbsc-form-group-content>
    </mbsc-form-group>
    
    <!-- ... -->
</mbsc-accordion>
Accordion with cards
<mbsc-accordion>
    <mbsc-card collapsible open>
        <mbsc-card-header>
            <mbsc-card-title class="mbsc-bold">Title</mbsc-card-title>
            <mbsc-card-subtitle>Subtitle</mbsc-card-subtitle>
        </mbsc-card-header>
        <mbsc-card-content>
             Content
        </mbsc-card-content>
    </mbsc-card>
    
    <mbsc-card collapsible>
        <mbsc-card-header>
            <mbsc-card-title class="mbsc-bold">Title 2</mbsc-card-title>
            <mbsc-card-subtitle>Subtitle</mbsc-card-subtitle>
        </mbsc-card-header>
        <mbsc-card-content>
             Content
        </mbsc-card-content>
    </mbsc-card>
    
    <!-- ... -->
</mbsc-accordion>