Switching between languages

The foundation-header component can display a language selector if the show-language-selector attribute is set. This enables users to switch between different languages within the application.

Genesis
React
Angular

Declaration:

<foundation-header show-language-selector></foundation-header>

Usage:

@customElement({
  name: 'header-example',
  template: html`
    <foundation-header
      show-language-selector
    ></foundation-header>
  `,
})
export class HeaderExample extends GenesisElement {}

Declaration:

<foundation-header show-language-selector></foundation-header>

Usage:

export default function HeaderExample() {
  return (
    <foundation-header
       show-language-selector
    ></foundation-header>
  );
}

Declaration:

<foundation-header show-language-selector></foundation-header>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'header-example',
  template: `
    <foundation-header
      show-language-selector
    ></foundation-header>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class HeaderExampleComponent {}

By default, the component uses the languageOptions object, which contains an availableLanguage array and a selectedLanguage property. These default options provide a list of available languages and the currently selected language.

When the user selects a different language, the component emits a language-changed event. This event is triggered whenever the language is changed via the language selector.

You can also pass custom language options by providing an attribute with this data. Here is an example of how to set up the foundation-header component with the show-language-selector attribute and custom language options:

Genesis
React
Angular

Declaration:

<foundation-header show-language-selector></foundation-header>

Usage:

@customElement({
  name: 'header-example',
  template: html`
    <foundation-header
      show-language-selector
      :languageOptions=${() => {
        return { availableLanguages: ['en', 'es'], selectedLanguage: 'es' };
      }}
    ></foundation-header>
  `,
})
export class HeaderExample extends GenesisElement {}

Declaration:

<foundation-header show-language-selector></foundation-header>

Usage:

export default function HeaderExample() {
  const languageOptions = { availableLanguages: ['en', 'es'], selectedLanguage: 'es' };

  return (
    <foundation-header
       show-language-selector
       languageOptions={languageOptions}
    ></foundation-header>
  );
}

Declaration:

<foundation-header show-language-selector></foundation-header>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'header-example',
  template: `
    <foundation-header
      show-language-selector
      [languageOptions]=languageOptions
    ></foundation-header>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class HeaderExampleComponent {
  const languageOptions = { availableLanguages: ['en', 'es'], selectedLanguage: 'es' };
}

Example​

Example