ontario-language-toggle
This component is used internally to toggle the component languages, set translations and update the HTML lang attribute in the DOM.
It renders an anchor tag (styles as an ontario-button) that accepts either a URL prop to switch the language to, or a custom toggle function if additional functionality is necessary.
It is used in the ontario-header component.
Technical Note: SSR (Server-Side Rendering) Considerations
The Ontario Language toggle component reads the <html lang=""> attribute and uses MutationObserver to track changes to it. However, since DOM access is not available during SSR, this logic only executes in the browser after hydration.
To ensure the correct language is rendered during SSR, explicitly pass the language prop, e.g.: <ontario-language-toggle language="fr"></ontario-language-toggle>. This avoids reliance on the <html> element, which is inaccessible server-side. It also ensures that other components listening for the setAppLanguage event receive the correct value immediately upon hydration.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
customLanguageToggle | custom-language-toggle | A custom function to pass to the language toggle button. This is optional. | ((event: Event) => void) | undefined | undefined |
language | language | The language of the component. In most cases, the language toggle should be the source of truth for determining the site language. Only pass a language value here if necessary. | "en" | "fr" | undefined | undefined |
size | size | The size of the language toggle button. If no prop is passed, it will be set to the default size. | "default" | "small" | undefined | 'default' |
url | url | The URL to change to when the language toggle button is clicked. This is optional. | string | undefined | undefined |
Events
| Event | Description | Type |
|---|---|---|
headerLanguageToggled | Event that fires when the language toggle is pressed/clicked. The event contains the oldLanguage along with the newLanguage. | CustomEvent<HeaderLanguageToggleEventDetails> |
setAppLanguage | Event that fires during the setAppLanguageHandler() method. The event contains the current language (after language logic has already occurred). | CustomEvent<"en" | "fr"> |
Dependencies
Used by
Graph
Built with StencilJS