eui documentation
  1. Components
  2. EuiLanguageSelectorComponent

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
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

aria-label
Type : string

If not provided, defaults to "Change Language - Current Language: [selected language]"
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
getcssClasses()
isShowDropDown
getisShowDropDown()

returns true if there are at least one and max four languages.

Returns : boolean
isShowModal
getisShowModal()

returns true if there are at least five languages.

Returns : boolean

results matching ""

    No results matching ""