Data binding

Data option

The Mobiscroll Select component has a data option, that is used to define the selection options.

The data option receives an array of strings or an array of objects containing a text, a value and optionally a group property.

The text must be a string, which will show up on the wheels. The value can be any kind of object (string, number, object, etc.), that will be the selected value when selecting it on the select.

The group property must be a string, that is used to group together a number of options. The options that have the same string specified by the group property will be grouped together. When groups are specified in the data, a header will be shown at the top of each group with the text specified in the group property. Additionally, when using the showGroupWheel option, an additional wheel will be shown, with the groups to help navigation. More on that in the Grouping section below.

When an array of string is passed to the data option, it is treated as both the text and the value would be the particular array item.

const strArray = ['USA', 'Canada', 'Mexico'];
// is the same as:
const objArray = [{ text: 'USA', value: 'USA'}, { text: 'Canada', value: 'Canada'}, { text: 'Mexico', value: 'Mexico' }];

In the above example the two arrays will show the same 3 countries to select from, and the selected value will also be the country's name as string.

Example with numbers as values

Department selection example

<mbsc-select [data]="myData" [(ngModel)]="selectedValue"></mbsc-select>

import { MbscSelectData } from '@mobiscroll/angular';

@Component({...})
export class MyComponent {
  myData: MbscSelectData = [
    { text: 'Marketing', value: 1 },
    { text: 'Sales', value: 2 },
    { text: 'Support', value: 3 },
    { text: 'Development', value: 4 },
  ];

  selectedValue: number = 2;
}

Example with complex objects as values

Department selection example

<mbsc-select [data]="myData" [(ngModel)]="mySelectedUser"></mbsc-select>

import { MbscSelectData } from '@mobiscroll/angular';

@Component({...})
export class MyComponent {
  myData: MbscSelectData = [
    { text: 'Alice', value: { id: 123, fullName: 'Alice Cooper' }},
    { text: 'Brandon', value: { id: 456, fullName: 'Brandon Lee' }},
    { text: 'Louisa', value: { id: 789, fullName: 'Louisa Crawford'}},
  ];

  mySelectedUser: MyUser | null = null;
}

Dynamic or async data

The select component supports dynamic data binding. For cases when the data is not immediately available or when the data changes with time (new options are added, or others removed) this feature is the most usefull.

Group options

Through the data option, with each item can be passed an optional group property. This group property is a string, that defines the group of the item. When the group is passed to any of the items, the whole data is treated as grouped and a header will be rendered above each group on the Select wheels. The header will contain the group name as specified in the group property.

Assigning groups to items

const myCountries = [{
    text: 'United Kingdom',
    value: 'GB',
}, {
    text: 'France',
    value: 'FR',
    group: 'Europe'
}, {
    text: 'Hungary',
    value: 'HU',
    group: 'Europe'
}, {
    text: 'United States of America',
    value: 'US',
    group: 'America'
}];

Furthermore an additional "group wheel" can be also rendered with the showGroupWheel option set to true. The group wheel items will be the group property values or the optgroup label attributes, and will help in navigating the option wheel.

<mbsc-select [data]="myCountries" [showGroupWheel]="true" [(ngModel)]="selected"></mbsc-select>

import { MbscSelectData } from '@mobiscroll/angular';

@Component({...})
export class MyComponent {
  myCountries: MbscSelectData = [{
    text: 'France',
    value: 'FR',
    group: 'Europe'
  }, {
    text: 'Hungary',
    value: 'HU',
    group: 'Europe'
  } // ...
  ];

  selected: string = 'HU';
}

Data through templates

Just like the native <select> element has <option> elements as children, that define selection options, the Mobiscroll Select component has <mbsc-select-option> components.

This can come in handy, when there are only a few number of options that are always the same to choose from.

<mbsc-select [(ngModel)]="gender" label="Gender">
    <mbsc-select-option value="female">Female</mbsc-select-option>
    <mbsc-select-option value="male">Male</mbsc-select-option>
</mbsc-select>

Native elements

The Mobiscroll Select can also be used as a directive. This can be usefull when using the select with custom components, or custom styled native elements.

The select directive can be used on native elements: <input /> or <select>.

When using the select directive on an <input />, the data option must be provided.

Using with an input

<label>My Input
    <input [(ngModel)]="selected" mbsc-select [data]="myData" />
</label>

When using the select directive with <select> elements, the options will be read from the <option> elements.

Using with a select

<label>My Select
    <select [(ngModel)]="gender" mbsc-select>
        <option value="female">Female</option>
        <option value="male">Male</option>
    </select>
</label>

Working with Ionic

Ionic is a good example for custom components usage. For instance, the select directive can be used on an <ion-input> component, thus one can have the selection handled by the select and at the same time maintain the style of an ionic form.

<ion-item>
    <ion-label>My Label</ion-label>
    <ion-input [(ngModel)]="selected" mbsc-select [data]="myData"></ion-input>
</ion-item>