Angular Select Populating the picker Example

The select component takes care of rendering data in a scrollable and consumable way for the user. The date can be passed a couple of different ways:

Inline HTML, embedded in the markup - This is good if you only have a couple of static options.
With the data option - If you want to load model data this is the way to do it. This is the way to populate the select if you want to create a custom item template.
Remote data - Load it through the data option from a remote api/data source.

Get started with this example

Inline HTML

The select and options are embedded in the markup.

Javascript jQuery Angular React Vue

                            html<mbsc-select [touchUi]="">
    <mbsc-select-option value="atl">Atlanta</mbsc-select-option>
    <mbsc-select-option value="ber">Berlin</mbsc-select-option>
    <mbsc-select-option value="bos">Boston</mbsc-select-option>
    <mbsc-select-option value="chi">Chicago</mbsc-select-option>
    <mbsc-select-option value="lon">London</mbsc-select-option>
    <mbsc-select-option value="la">Los Angeles</mbsc-select-option>
    <mbsc-select-option value="ny">New York</mbsc-select-option>
    <mbsc-select-option value="par">Paris</mbsc-select-option>
    <mbsc-select-option value="sf">San Francisco</mbsc-select-option>
</mbsc-select>
                    

HTML

Data object

Pass the items to the data option if you are loading from the model or in case of item templating.

Javascript jQuery Angular React Vue

html<mbsc-select
    [data]="myData"
    [touchUi]="">
</mbsc-select>
tsmyData = [
    { text: 'Atlanta', value: 'atl' },
    { text: 'Berlin', value: 'ber' },
    { text: 'Boston', value: 'bos' },
    { text: 'Chicago', value: 'chi' },
    { text: 'London', value: 'lon' },
    { text: 'Los Angeles', value: 'la' },
    { text: 'New York', value: 'ny' },
    { text: 'Paris', value: 'par' },
    { text: 'San Francisco', value: 'sf' }
];

Data object

Remote data

The data loaded from a remote source needs to be passed to the data option as in the previous example.

Javascript jQuery Angular React Vue

html<mbsc-select
    [data]="remoteData"
    [touchUi]="">
</mbsc-select>
tsremoteData: any;
                        
ngOnInit(): void {
    this.http.get('https://trial.mobiscroll.com/content/languages.json')
    .subscribe((resp) => {
        this.remoteData = resp;
    });
}