### 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
- a Language list is managed through EuiAppShellService
- Supports 2-3 languages via dropdown, 4+ via modal

### Implements

`AfterViewInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
host | `{ }`
providers | `EuiDialogService`
selector | `eui-language-selector`
imports | `NgTemplateOutlet` `EUI_DROPDOWN` `EUI_ICON` `EUI_BUTTON`
templateUrl | `./language-selector.component.html`
styleUrl | `./language-selector.scss`

### Index

###### Properties

- appShellService
- ariaLabel
- Readonly cssClasses
- Readonly isShowDropDown
- Readonly isShowModal
- languages
- selectedLanguage

###### Methods

- onClick
- onLanguageChanged
- onOpen

###### Inputs

- ariaLabelInput
- euiPrimary
- hasLanguageSelection
- isToolbarSelector

###### Outputs

- languageSelectorClick

### Constructor

`constructor()`

### Inputs

ariaLabelInput
Type : `string`
Default value : `null, { alias: 'aria-label' }`
If not provided, defaults to "Change Language - Current Language: [selected language]"

euiPrimary
Default value : `false, { transform: booleanAttribute }`

hasLanguageSelection
Default value : `true, { transform: booleanAttribute }`

isToolbarSelector
Default value : `false, { transform: booleanAttribute }`

### Outputs

languageSelectorClick
Type : `null`

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

ariaLabel
Type : `unknown`
Default value : `signal<string>(null)`

Readonly cssClasses
Type : `unknown`
Default value : `computed(() => [ 'eui-language-selector', this.languages()?.length <= 1 ? 'eui-language-selector--empty' : '', this._isToolbarSelector() ? 'eui-language-selector--toolbar-selector' : '', ].join(' ').trim())`

Readonly isShowDropDown
Type : `unknown`
Default value : `computed(() => this.languages()?.length > 1 && this.languages()?.length < 4)`
returns true if there are at least one and max four languages.

Readonly isShowModal
Type : `unknown`
Default value : `computed(() => this.languages()?.length >= 4)`
returns true if there are at least five languages.

languages
Type : `unknown`
Default value : `linkedSignal(() => this._languagesSource())`

selectedLanguage
Type : `unknown`
Default value : `signal<EuiLanguage>(null)`

# results matching ""

# No results matching ""