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

# Localization - Angular Select demo

Angular Select component localization example supporting 37 languages, button text with full RTL capability.

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

## Description

All components are fully localized. In case of the select this covers button copy, rtl and more. You can see how each example shows up by clicking on the small flag icon or checking the examples below.

**All settings can be manually overridden** [See what options the localization impacts →](https://mobiscroll.com/docs/angular/select/api#localization)

## What this demo shows

- Shows a single-value select examples with different localization options.
- **Locale selector** The left side of the select shows a `Set localization to` label with a dropdown. That opens a list of available locales that updates the select component localization.
- **Localization behavior** The localized setup affects button labels, RTL layout support, and other built-in UI text and behaviors.
- **Select input** 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.
- **Input value** Selecting an option updates the associated input with that value.

## Best for

- **Multi-language select UIs** Apps that need the same select experience in multiple languages and regional formats.
- **Region-specific experiences** Products that need translated interface copy without rebuilding the select component UI.

## Tutorial

### Set localization to

`English`

```html
<mbsc-select
    [locale]="localeEn">
</mbsc-select>
```

With "Arabic":

```html
<mbsc-select
    [locale]="localeAr">
</mbsc-select>
```

With "Bulgarian":

```html
<mbsc-select
    [locale]="localeBg">
</mbsc-select>
```

With "Català":

```html
<mbsc-select
    [locale]="localeCa">
</mbsc-select>
```

With "Cestina":

```html
<mbsc-select
    [locale]="localeCs">
</mbsc-select>
```

With "Chinese":

```html
<mbsc-select
    [locale]="localeZh">
</mbsc-select>
```

With "Croatian":

```html
<mbsc-select
    [locale]="localeHr">
</mbsc-select>
```

With "Dansk":

```html
<mbsc-select
    [locale]="localeDa">
</mbsc-select>
```

With "Deutsch":

```html
<mbsc-select
    [locale]="localeDe">
</mbsc-select>
```

With "English (UK)":

```html
<mbsc-select
    [locale]="localeEnGB">
</mbsc-select>
```

With "Español":

```html
<mbsc-select
    [locale]="localeEs">
</mbsc-select>
```

With "Français":

```html
<mbsc-select
    [locale]="localeFr">
</mbsc-select>
```

With "Greek":

```html
<mbsc-select
    [locale]="localeEl">
</mbsc-select>
```

With "Hindi":

```html
<mbsc-select
    [locale]="localeHi">
</mbsc-select>
```

With "Italiano":

```html
<mbsc-select
    [locale]="localeIt">
</mbsc-select>
```

With "Japanese":

```html
<mbsc-select
    [locale]="localeJa">
</mbsc-select>
```

With "Korean":

```html
<mbsc-select
    [locale]="localeKo">
</mbsc-select>
```

With "Lietuvių":

```html
<mbsc-select
    [locale]="localeLt">
</mbsc-select>
```

With "Magyar":

```html
<mbsc-select
    [locale]="localeHu">
</mbsc-select>
```

With "Nederlands":

```html
<mbsc-select
    [locale]="localeNl">
</mbsc-select>
```

With "Norsk":

```html
<mbsc-select
    [locale]="localeNo">
</mbsc-select>
```

With "Polski":

```html
<mbsc-select
    [locale]="localePl">
</mbsc-select>
```

With "Português Europeu":

```html
<mbsc-select
    [locale]="localePtPT">
</mbsc-select>
```

With "Pt. Brasileiro":

```html
<mbsc-select
    [locale]="localePtBR">
</mbsc-select>
```

With "Română":

```html
<mbsc-select
    [locale]="localeRo">
</mbsc-select>
```

With "Serbian":

```html
<mbsc-select
    [locale]="localeSr">
</mbsc-select>
```

With "Slovencina":

```html
<mbsc-select
    [locale]="localeSk">
</mbsc-select>
```

With "Suomi":

```html
<mbsc-select
    [locale]="localeFi">
</mbsc-select>
```

With "Svenska":

```html
<mbsc-select
    [locale]="localeSv">
</mbsc-select>
```

With "Thai":

```html
<mbsc-select
    [locale]="localeTh">
</mbsc-select>
```

With "Türkçe":

```html
<mbsc-select
    [locale]="localeTr">
</mbsc-select>
```

With "Ukrainian":

```html
<mbsc-select
    [locale]="localeUa">
</mbsc-select>
```

With "Vietnamese":

```html
<mbsc-select
    [locale]="localeVi">
</mbsc-select>
```

With "Русский":

```html
<mbsc-select
    [locale]="localeRu">
</mbsc-select>
```

With "Русский (UA)":

```html
<mbsc-select
    [locale]="localeRuUA">
</mbsc-select>
```

With "עברית":

```html
<mbsc-select
    [locale]="localeHe">
</mbsc-select>
```

With "فارسی":

```html
<mbsc-select
    [locale]="localeFa">
</mbsc-select>
```

```ts
import { localeEn } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeEn = localeEn;
}
```

With "Arabic":

```ts
import { localeAr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeAr = localeAr;
}
```

With "Bulgarian":

```ts
import { localeBg } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeBg = localeBg;
}
```

With "Català":

```ts
import { localeCa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeCa = localeCa;
}
```

With "Cestina":

```ts
import { localeCs } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeCs = localeCs;
}
```

With "Chinese":

```ts
import { localeZh } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeZh = localeZh;
}
```

With "Croatian":

```ts
import { localeHr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeHr = localeHr;
}
```

With "Dansk":

```ts
import { localeDa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeDa = localeDa;
}
```

With "Deutsch":

```ts
import { localeDe } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeDe = localeDe;
}
```

With "English (UK)":

```ts
import { localeEnGB } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeEnGB = localeEnGB;
}
```

With "Español":

```ts
import { localeEs } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeEs = localeEs;
}
```

With "Français":

```ts
import { localeFr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeFr = localeFr;
}
```

With "Greek":

```ts
import { localeEl } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeEl = localeEl;
}
```

With "Hindi":

```ts
import { localeHi } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeHi = localeHi;
}
```

With "Italiano":

```ts
import { localeIt } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeIt = localeIt;
}
```

With "Japanese":

```ts
import { localeJa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeJa = localeJa;
}
```

With "Korean":

```ts
import { localeKo } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeKo = localeKo;
}
```

With "Lietuvių":

```ts
import { localeLt } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeLt = localeLt;
}
```

With "Magyar":

```ts
import { localeHu } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeHu = localeHu;
}
```

With "Nederlands":

```ts
import { localeNl } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeNl = localeNl;
}
```

With "Norsk":

```ts
import { localeNo } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeNo = localeNo;
}
```

With "Polski":

```ts
import { localePl } from '@mobiscroll/angular';
                                     
class myComponent {
    public localePl = localePl;
}
```

With "Português Europeu":

```ts
import { localePtPT } from '@mobiscroll/angular';
                                     
class myComponent {
    public localePtPT = localePtPT;
}
```

With "Pt. Brasileiro":

```ts
import { localePtBR } from '@mobiscroll/angular';
                                     
class myComponent {
    public localePtBR = localePtBR;
}
```

With "Română":

```ts
import { localeRo } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeRo = localeRo;
}
```

With "Serbian":

```ts
import { localeSr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeSr = localeSr;
}
```

With "Slovencina":

```ts
import { localeSk } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeSk = localeSk;
}
```

With "Suomi":

```ts
import { localeFi } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeFi = localeFi;
}
```

With "Svenska":

```ts
import { localeSv } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeSv = localeSv;
}
```

With "Thai":

```ts
import { localeTh } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeTh = localeTh;
}
```

With "Türkçe":

```ts
import { localeTr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeTr = localeTr;
}
```

With "Ukrainian":

```ts
import { localeUa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeUa = localeUa;
}
```

With "Vietnamese":

```ts
import { localeVi } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeVi = localeVi;
}
```

With "Русский":

```ts
import { localeRu } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeRu = localeRu;
}
```

With "Русский (UA)":

```ts
import { localeRuUA } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeRuUA = localeRuUA;
}
```

With "עברית":

```ts
import { localeHe } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeHe = localeHe;
}
```

With "فارسی":

```ts
import { localeFa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeFa = localeFa;
}
```

## 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
- [`display`](https://mobiscroll.com/docs/angular/select/api#opt-display) - option
- [`locale`](https://mobiscroll.com/docs/angular/select/api#localization-locale) - option
- [`inputStyle`](https://mobiscroll.com/docs/angular/select/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/angular/select/api#opt-labelStyle) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { localeEs, 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',
    },
  ];
  myLocale = localeEs; // Sets the language of the component
}
```

### Template

```html
<mbsc-select
  [data]="myData"
  label="Select"
  display="bottom"
  [locale]="myLocale"
  inputStyle="outline"
  labelStyle="stacked"
  placeholder="Please select..."
></mbsc-select>
```

## Implementation notes

- The `locale` option accepts a locale object that translates the picker's built-in UI text (e.g. `Set`/`Cancel` button labels, other chrome strings) and applies RTL layout for right-to-left locales (Arabic, Hebrew, Persian). It does not translate the app-supplied option `text`/`data` - those stay whatever the app passes in.
- Locale objects are named per-language exports, not raw strings: JS/jQuery reference them off the global as `mobiscroll.locale.<code>` (e.g. `mobiscroll.locale.es`); React, Angular, and Vue import a named export per locale from their respective package, e.g. `import { localeEs } from '@mobiscroll/angular'` / `'@mobiscroll/react'` / `'@mobiscroll/vue'`.
- Per-framework binding: JS/jQuery pass `locale: mobiscroll.locale.es` inside `.select({...})`; React binds `locale={localeEs}` as a prop on `<Select>`; Angular binds `[locale]="localeEs"` on `<mbsc-select>` after importing/assigning `localeEs` on the component; Vue binds `:locale="localeEs"` on `<MbscSelect>` after importing `localeEs`.
- Switching locale at runtime (as the demo's language dropdown does) is imperative even outside JS/jQuery when driven by a control external to the component: JS/jQuery call `inst.setOptions({ locale: mobiscroll.locale[code] })` on the instance (JS: captured directly from the return value of `mobiscroll.select(...)`; jQuery: obtained via `.mobiscroll('getInst')`); in a component-driven app the equivalent is updating the bound `locale` value/prop and letting the framework re-render.
- "All settings can be manually overridden" means any individual option (e.g. custom button text) set explicitly on the picker takes precedence over the string that locale would otherwise supply - locale sets defaults, not overrides.

## 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: [Event hooks](https://demo.mobiscroll.com/angular/select/event-hooks.md) - Angular Select demo with event hooks for custom integration and functionality.
- Next: [RTL support](https://demo.mobiscroll.com/angular/select/rtl-right-to-left.md) - Angular Select Right-to-left rendering demo with group options for quick navigation. With full RTL language support and source.