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.

Implements

OnInit AfterViewInit OnDestroy OnChanges

Metadata

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

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