---
title: "Angular Select Populating the picker Example | Mobiscroll"
component: "Select"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/select/data-sources"
---

# Populating the picker - Angular Select demo

Angular select component with different ways of loading the data: native html select, data objects and remote json.

- [Live demo](https://demo.mobiscroll.com/angular/select/data-sources)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/pickers/select/data-sources)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/select/data-sources.md), [jQuery](https://demo.mobiscroll.com/jquery/select/data-sources.md), [React](https://demo.mobiscroll.com/react/select/data-sources.md), [Vue](https://demo.mobiscroll.com/vue/select/data-sources.md)

## Description

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](https://demo.mobiscroll.com/angular/select/item-templating).
- **Remote data** - Load it through the `data` option from a remote api/data source.

## What this demo shows

- Three single-value select examples using different data population methods.
- **Inline HTML** Embeds the select and its options directly in the markup.
- **Data object** Passes model data to the `data` option, which also supports custom item templates.
- **Remote data** Passes data loaded from a remote API or data source to the `data` option.
- **Select inputs** Opens the picker when the user focuses or clicks the associated input.
- **Input behavior** Displays the picker below the input and closes it when the user clicks outside.
- **Picker content** Presents a predefined list of options in a dropdown-style popup.
- **Hover state** Highlights an option when the user hovers over it.
- **Selection** Marks the selected option with a checkmark to indicate the current value.
- **Input value** Updates the associated input with the selected value.

## Best for

- **Small static lists** Embed a few fixed options directly in the markup with inline HTML.
- **Model-driven options** Populate the select through the `data` option when values come from application data.
- **Custom item layouts** Use the `data` option when select items need custom templates.
- **Remote datasets** Load options from a remote API or data source and pass the results to the `data` option.

## Tutorial

### Inline HTML

The select and options are embedded in the markup.

```html
<mbsc-select [touchUi]="false">
    <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>
```

### Data object

Pass the items to the `data` option if you are loading from the model or in case of [item templating](https://demo.mobiscroll.com/angular/select/item-templating).

```html
<mbsc-select
    [data]="myData"
    [touchUi]="false">
</mbsc-select>
```

```ts
myData = [
    { 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' }
];
```

### Remote data

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

```html
<mbsc-select
    [data]="remoteData"
    [touchUi]="false">
</mbsc-select>
```

```ts
remoteData: any;
                        
ngOnInit(): void {
    this.http.get('https://trial.mobiscroll.com/content/languages.json')
    .subscribe((resp) => {
        this.remoteData = resp;
    });
}
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/select/api#opt-themeVariant) - option
- [`label`](https://mobiscroll.com/docs/angular/select/api#opt-label) - option
- [`labelStyle`](https://mobiscroll.com/docs/angular/select/api#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/angular/select/api#opt-inputStyle) - option
- [`data`](https://mobiscroll.com/docs/angular/select/api#opt-data) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent implements OnInit {
  myData = [
    {
      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',
    },
  ];

  remoteData: any;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get('https://trial.mobiscroll.com/content/languages.json').subscribe((resp: any) => {
      this.remoteData = resp;
    });
  }
}
```

### Template

```html
<mbsc-page>
  <div class="mbsc-grid mbsc-form-grid">
    <div class="mbsc-row">
      <div class="mbsc-col-sm-12 mbsc-col-md-4">
        <mbsc-select label="HTML" labelStyle="stacked" inputStyle="box" placeholder="Please select...">
          <mbsc-select-option value="atl">Atlanta</mbsc-select-option>
          <mbsc-select-option value="ber">Berlin</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>
      </div>
      <div class="mbsc-col-sm-12 mbsc-col-md-4">
        <mbsc-select [data]="myData" label="Data object" labelStyle="stacked" inputStyle="box" placeholder="Please select..."></mbsc-select>
      </div>
      <div class="mbsc-col-sm-12 mbsc-col-md-4">
        <mbsc-select
          [data]="remoteData"
          label="Remote data"
          labelStyle="stacked"
          inputStyle="box"
          placeholder="Please select..."
        ></mbsc-select>
      </div>
    </div>
  </div>
</mbsc-page>
```

## Implementation notes

- **Inline HTML** works only for JS/jQuery: a native `<select>` with `<option value="...">Text</option>` children is passed to `mobiscroll.select('#id', {...})` / `$('#id').mobiscroll().select({...})` as-is, with no `data` option needed. React, Angular, and Vue always populate options through the `data` option/prop - there is no inline-markup path for those frameworks.
- **Data object** populates the picker from an array of `{ text, value }` objects passed to `data` (JS/jQuery `data: [...]` in `.select({...})`; React `data={myData}` prop on `<Select>`; Angular `[data]="myData"` binding with `myData` defined on the component; Vue `:data="myData"` binding with `myData` defined in `<script setup>`).
- **Remote data** loads the same `{ text, value }` shape asynchronously and assigns it after the initial render/init rather than at construction time:
  - JS/jQuery: get the instance via `.mobiscroll('getInst')` (or the return value of `mobiscroll.select(...)`), fetch with `mobiscroll.getJson(url, callback, 'jsonp')` / `$.getJSON(url, callback, 'jsonp')`, then call `inst.setOptions({ data: resp })` in the callback.
  - React: fetch inside a `useEffect` and store the response in state (`useState([])`), then bind `data={remoteData}` - the picker re-renders once the state updates.
  - Angular: fetch in `ngOnInit` via `this.http.get(url).subscribe(...)`, assign the response to a component property, and bind `[data]="remoteData"`.
  - Vue: fetch in `onMounted` and assign the response to a `ref([])`, bound as `:data="remoteData"`.
- `inputElement` points the picker at a separate `<input>` element (rather than the `<select>`/component itself) so the popup opens when that input is focused/clicked and shows the selected value there.
- The example data uses string `value`s (e.g. `'atl'`, `'ber'`); `text` is the label shown in the option list and, once selected, in the bound input.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-angular.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config angular
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation

## Related demos

- Previous: [Understanding display modes](https://demo.mobiscroll.com/angular/select/mobile-desktop-display.md) - Angular select/dropdown for mobile and desktop with top, bottom, popup, center, modal, anchored positioning.