### File

`packages/components/eui-language-selector/language-selector.component.ts`

### Description

This component displays available languages and allows users to select their preferred language. It adapts its display based on the number of available languages:

- For 1 language: No selector is shown
- For 2-3 languages: Displays a dropdown menu
- For 4+ languages: Opens a modal dialog with the full list

The component integrates with EuiAppShellService to manage language state and uses TranslateService for localization.

### Basic Usage

Example :

    <eui-language-selector></eui-language-selector>

### In Toolbar

Example :

    <eui-toolbar>
      <eui-language-selector [isToolbarSelector]="true"></eui-language-selector>
    </eui-toolbar>

### Accessibility

- Provides default `aria-label` indicating current language
- Custom `aria-label` can be set via input
- Keyboard navigable dropdown and modal interfaces

### Notes

- Automatically detects toolbar parent and adjusts styling
- Language list is managed through EuiAppShellService
- Supports 2-3 languages via dropdown, 4+ via modal

### Implements

`OnInit` `AfterViewInit` `OnDestroy` `OnChanges`

### Metadata

encapsulation | `ViewEncapsulation.None`
providers | `EuiDialogService`
selector | `eui-language-selector`
imports | `AsyncPipe` `NgTemplateOutlet` `EUI_DROPDOWN` `EUI_ICON` `EUI_BUTTON`
templateUrl | `./language-selector.component.html`
styleUrl | `./language-selector.scss`

### Index

###### Properties
appShellService languages selectedLanguage
###### Methods
onClick onLanguageChanged onOpen
###### Inputs
aria-label euiPrimary hasLanguageSelection isToolbarSelector
###### Outputs
languageSelectorClick
###### HostBindings
class
###### Accessors
cssClasses isShowDropDown isShowModal

### Inputs

aria-label
Type : `string`

euiPrimary
Type : `boolean`
Default value : `false`

hasLanguageSelection
Type : `boolean`
Default value : `true`

isToolbarSelector
Type : `boolean`
Default value : `false`

### Outputs

languageSelectorClick
Type : `EventEmitter`

### HostBindings

class
Type : `string`

### Methods

onClick
`onClick()`
Returns : `void`

onLanguageChanged
`onLanguageChanged(language: EuiLanguage)`
Updates the active language in the application. Parameters :
Name | Type | Optional | Description
language | `EuiLanguage` | No | The language object to set as active.
Returns : `void`

onOpen
`onOpen(titleLabel: string)`
Opens a modal dialog with the full list of available languages. Parameters :
Name | Type | Optional | Default value | Description
titleLabel | `string` | No | `this.translateService.instant('eui.languageSelector.modalTitle')` | Optional custom title for the modal.
Returns : `void`

### Properties

appShellService
Type : `unknown`
Default value : `inject(EuiAppShellService)`

languages
Type : `EuiLanguage[]`

selectedLanguage
Type : `EuiLanguage`

### Accessors

cssClasses
get `cssClasses()`

isShowDropDown
get `isShowDropDown()`
returns true if there are at least one and max four languages. Returns : `boolean`

isShowModal
get `isShowModal()`
returns true if there are at least five languages. Returns : `boolean`

# results matching ""

# No results matching ""