---
title: "Angular Select Single select Example | Mobiscroll"
component: "Select"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/select/single-select"
---

# Single select - Angular Select demo

Angular select & dropdown for mobile and desktop with single value selection. For Angular 22 and Ionic 8.

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

## Description

Single value selection is the default behavior of the picker. You can explicitly enable it by setting the [`selectMultiple`](https://mobiscroll.com/docs/angular/select/api#opt-selectMultiple) to `false`.

You can dynamically switch between single and multiple select.

**Looking for multiple select?** [Check out the next example →](https://demo.mobiscroll.com/angular/select/multiple-select)

## What this demo shows

- Shows a single-value select example.
- **Select inputs** This example opens the picker when the user focuses or clicks the input.
- **Input behavior** The picker opens below the input and closes when the user clicks outside it.
- **Picker content** Show a predefined list of options in a dropdown-style popup.
- **Hover state** Hovering over an option highlights it in the picker.
- **Selection** Selecting an option marks it with a checkmark to indicate the current value.
- **Scrolling** The picker supports scrolling through the full list of options.
- **Input value** Selecting an option updates the input with that value.

## Best for

- **Responsive forms** Use the touch or desktop layout to match the input method and available screen space.
- **Profile and account forms** Let users choose a single predefined value, such as a country, language, or notification preference.
- **Filters and settings** Provide a compact list for selecting one status, category, display mode, or configuration value.

## Tutorial

```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' }
];
```

## 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
- [`data`](https://mobiscroll.com/docs/angular/select/api#opt-data) - 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

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } 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 {
  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',
    },
  ];
}
```

### Template

```html
<mbsc-page>
  <mbsc-select [data]="myData" label="Single select" labelStyle="stacked" inputStyle="box" placeholder="Please select..."></mbsc-select>
</mbsc-page>
```

## Implementation notes

- `selectMultiple` defaults to `false`, so a `Select` instance is single-value out of the box; it only needs to be set explicitly when switching a given instance between single- and multiple-select behavior at runtime.
- `data` is an array of `{ text, value }` objects (e.g. `{ text: 'Atlanta', value: 'atl' }`); when no `data` is passed, the select instead reads `<option value="...">Label</option>` entries from the native `<select>` element it's bound to.
- `inputElement` points the select at a separate `<input>` used as the display/trigger field - the popup opens on focus/click of that input, positioned below it, and closes on outside click; the selected option's text becomes the input's value and the selected option itself is marked with a checkmark in the list.
- `touchUi` (boolean) switches the picker's rendering between the touch-optimized scroller/dialog layout (`true`) and the compact desktop dropdown layout (`false`); the demo's responsive layout toggle drives this option to preview both.
- Per framework: JS/jQuery pass `touchUi`/`inputElement`/`data` inside `.select({ ... })` / `mobiscroll.select(el, { ... })`; React sets `touchUi`/`data` as props on `<Select>`; Angular binds `[touchUi]`/`[data]` on `<mbsc-select>`; Vue binds `:touchUi`/`:data` on `<MbscSelect>`.

## 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

- Next: [Multiple select](https://demo.mobiscroll.com/angular/select/multiple-select.md) - Angular multiple select & multi-select for mobile and desktop. Use it for product or category filtering with check-mark selection.