Import
import { LocaleSelectorModule } from '@backbase/ui-ang/locale-selector';
Usage
Use the bb-locale-selector-ui component to display a locale selector. The component requires the LOCALE_LIST injection token to be provided with available locales.
<!-- Basic locale selector usage -->
<bb-locale-selector-ui (selectLocale)="onLocaleChange($event)"></bb-locale-selector-ui>
Custom templates
The bbLocaleSelectorLabel directive allows customization of the button label content.
<bb-locale-selector-ui>
<ng-template bbLocaleSelectorLabel>
<bb-icon-ui name="globe"></bb-icon-ui>
<span>Choose Language</span>
</ng-template>
</bb-locale-selector-ui>
LOCALE_LIST injection token
The component requires the LOCALE_LIST injection token to provide the available locales. Configure this in your module or application bootstrap.
import { LOCALE_LIST } from '@backbase/ui-ang/locale-selector';
const locales = {
'en-US': {
language: 'English (US)',
icon: 'assets/flags/us.svg'
},
'es-ES': {
language: 'Español',
icon: 'assets/flags/es.svg'
},
'fr-FR': {
language: 'Français',
icon: 'assets/flags/fr.svg'
}
};
@NgModule({
providers: [
{ provide: LOCALE_LIST, useValue: locales }
]
})
export class AppModule { }
Locale interface
Each locale in the catalog follows the Locale interface:
interface Locale {
language: string;
icon?: string;
}
interface LocaleCatalog {
[key: string]: Locale;
}
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
btnColor |
string |
'primary' |
|
dropdownPlacement |
PlacementArray |
['bottom-end', 'bottom-start', 'top-end', 'top-start'] |
|
fullWidth |
boolean |
false |
|
icon |
string |
undefined |
|
iconSize |
string |
'md' |
|
isOpen |
boolean |
false |
|
showModalOnMobileView |
boolean |
false |
btnColor
The btnColor input sets the color of the locale selector button.
<!-- Locale selector with secondary button color -->
<bb-locale-selector-ui [btnColor]="'secondary'"></bb-locale-selector-ui>
dropdownPlacement
The dropdownPlacement input sets the position of the dropdown menu relative to the trigger button.
<!-- Locale selector with top placement -->
<bb-locale-selector-ui [dropdownPlacement]="['top-start', 'top-end']"></bb-locale-selector-ui>
fullWidth
The fullWidth input stretches the button to 100% width of its container.
<!-- Full width locale selector -->
<bb-locale-selector-ui [fullWidth]="true"></bb-locale-selector-ui>
icon
The icon input sets a custom icon to display in the button.
<!-- Locale selector with custom icon -->
<bb-locale-selector-ui [icon]="'globe'"></bb-locale-selector-ui>
iconSize
The iconSize input sets the size of the icon displayed in the button.
<!-- Locale selector with large icon -->
<bb-locale-selector-ui [iconSize]="'lg'"></bb-locale-selector-ui>
isOpen
The isOpen input defines whether the dropdown menu is opened initially.
<!-- Locale selector opened by default -->
<bb-locale-selector-ui [isOpen]="true"></bb-locale-selector-ui>
showModalOnMobileView
The showModalOnMobileView input displays the locale selection inside a modal on mobile viewports.
<!-- Locale selector with mobile modal -->
<bb-locale-selector-ui [showModalOnMobileView]="true"></bb-locale-selector-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
selectLocale |
EventEmitter<string> |
Emitted when a locale is selected, providing the locale code |
Responsive behavior
The component automatically adapts to different screen sizes:
- Desktop: Displays as a dropdown menu
- Mobile (when showModalOnMobileView is true): Shows locales in a modal dialog
- Mobile breakpoint: Triggered at viewport width ≤ 991px
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
dropDownButtonLabel |
Sets the aria-label for the dropdown button |
string |
Accessibility features
- Uses proper ARIA labels and roles for screen reader compatibility
- Supports keyboard navigation through dropdown items
- Provides semantic button and menu item roles
- Includes internationalization support for button labels and modal content
- Images use role="presentation" for decorative flag icons
Implementation notes
- The component only renders when more than one locale is available in the LOCALE_LIST
- Current locale is automatically detected from Angular's LOCALE_ID injection token
- Mobile detection uses Angular CDK's BreakpointObserver
- Dropdown positioning uses ng-bootstrap's placement system
- Modal implementation uses the bb-modal-ui component for mobile views