Skip to content

Language switcher

Code

This component provides a dropdown to switch the current language used by the configured translation framework. All properties are optional, by default the available languages will be automatically queried from the translation service and translated using the LANGUAGE key prefix.

Usage

import { SiLanguageSwitcherComponent } from '@simpl/element-ng/language-switcher';

@Component({
  imports: [SiLanguageSwitcherComponent, ...]
})

Language switcher - standard

The language names can either be passed as pre-translated strings or as translation keys: { value: 'en', name: 'LANGUAGES.EN'}

Language switcher - alternative

The translationKey can be set to the translation group, e.g. "LANGUAGE" which provides the language names. Make sure that the translation keys for the languages are set to the ISO language codes as uppercase:

"LANGUAGE": {
  "EN": "English",
  "DE": "Deutsch",
  "FR": "Français"
}

SiLanguageSwitcherComponent API Documentation

selector
si-language-switcher

Input Properties

NameTypeDefaultDescription
availableLanguages
(null | (string | IsoLanguageValue)[])nullList of all available languages in this application.
languageSwitcherLabel
TranslatableString$localize`:@@SI_LANGUAGE_SWITCHER.LABEL:Language switcher`Text for aria label for the language selector. Needed for a11y
translationKey
string'LANGUAGE'Key for translation. If the key is set to an empty string, the language of the underlying translation framework will not be switched.

Types Documentation

Properties
Language name, ex "English" or translatable string, ex "LANGUAGES.EN"
name: string
Official ISO language code, ex "en"
value: string
(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
Translatable
import

Except where otherwise noted, content on this site is licensed under MIT License.