Angular Select Group options Example

Enable group headers through the group property of the options or the optgroup of the native select.

Grouping works for both single and multiple select pickers.

Group headers with single select

html<mbsc-select
    [data]="myData"
    [touchUi]="">
</mbsc-select>
tsmyData = [
    { text: 'Atlanta', group: 'US', value: 'atl' },
    { text: 'Boston', group: 'US', value: 'bos' },
    { text: 'Bath', group: 'UK', value: 'bat' },
    { text: 'Bristol', group: 'UK', value: 'bri' },
];

Single select

Render a group wheel

Javascript jQuery Angular React Vue

html<mbsc-select
    [showGroupWheel]="true"
    [data]="myData"
    [touchUi]="">
</mbsc-select>
tsmyData = [
    { text: 'Atlanta', group: 'US', value: 'atl' },
    { text: 'Boston', group: 'US', value: 'bos' },
    { text: 'Bath', group: 'UK', value: 'bat' },
    { text: 'Bristol', group: 'UK', value: 'bri' },
    { text: 'Berlin', group: 'DE', value: 'ber' },
    { text: 'Duisburg', group: 'DE', value: 'dus' },
    { text: 'Cologne', group: 'DE', value: 'col' },
    { text: 'Paris', group: 'FR', value: 'par' },
    { text: 'Lyon', group: 'FR', value: 'lyo' },
];

Group wheel

Group headers with multiple select

Javascript jQuery Angular React Vue

html<mbsc-select
    [data]="myData"
    [touchUi]="">
</mbsc-select>
tsmyData = [
    { text: 'Camera & Photo', group: 'Electronics', value: 1 },
    { text: 'Cell Phones & Accessories', group: 'Electronics', value: 2 },
    { text: 'GPS & Navigation', group: 'Electronics', value: 3 },
    { text: 'Plugs and Outlets', group: 'Smart Home', value: 4 },
    { text: 'Heating and Cooling', group: 'Smart Home', value: 5 },
    { text: 'Detectors and Sensors', group: 'Smart Home', value: 6 },
];