Import
import { ProductSelectorModule } from '@backbase/ui-ang/product-selector'
Usage
Use the bb-product-selector-ui component to display a dropdown selector for products. The component requires content projection for both the toggle button and dropdown menu items.
<!-- Basic product selector usage -->
<bb-product-selector-ui>
<ng-container bbDropdownToggle>
<div class="bb-stack">
<span class="bb-text-support bb-product-selector__placeholder">
Select one or more items
</span>
</div>
</ng-container>
<ng-container bbDropdownMenu>
<div
(click)="selectProduct(product)"
role="option"
#listItem
tabindex="0"
class="bb-product-selector__dropdown-item">
<!-- Product item content -->
</div>
</ng-container>
</bb-product-selector-ui>
ProductItem interface
The component works with objects that implement the ProductItem interface:
interface ProductItem {
id: string;
name?: string;
currency?: string;
amount?: string;
productNumber?: string;
[key: string]: any;
}
This interface allows for flexible product data while ensuring consistent identification and display properties.
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
autoClose |
boolean |
true |
|
container |
'' | 'body' |
'' |
|
id |
string |
undefined |
|
isOpen |
boolean |
false |
|
position |
Placement | PlacementArray |
['bottom-end', 'bottom-start', 'top-end', 'top-start'] |
autoClose
The autoClose input determines whether the dropdown should automatically close when clicking on dropdown items or pressing ESC.
<!-- Product selector that doesn't auto-close -->
<bb-product-selector-ui
[autoClose]="false">
<ng-container bbDropdownToggle>
<span>Select products</span>
</ng-container>
<ng-container bbDropdownMenu>
<div role="option" #listItem tabindex="0">Product 1</div>
<div role="option" #listItem tabindex="0">Product 2</div>
</ng-container>
</bb-product-selector-ui>
container
The container input specifies which element the dropdown should be appended to.
<!-- Product selector appended to body -->
<bb-product-selector-ui
container="body">
<ng-container bbDropdownToggle>
<span>Select product</span>
</ng-container>
<ng-container bbDropdownMenu>
<div role="option" #listItem tabindex="0">Product 1</div>
</ng-container>
</bb-product-selector-ui>
id
The id input provides a unique identifier for the product selector toggle element.
<!-- Product selector with custom ID -->
<bb-product-selector-ui
id="main-product-selector">
<ng-container bbDropdownToggle>
<span>Select product</span>
</ng-container>
<ng-container bbDropdownMenu>
<div role="option" #listItem tabindex="0">Product 1</div>
</ng-container>
</bb-product-selector-ui>
isOpen
The isOpen input controls the open/close state of the dropdown menu.
<!-- Product selector initially opened -->
<bb-product-selector-ui
[isOpen]="true">
<ng-container bbDropdownToggle>
<span>Select product</span>
</ng-container>
<ng-container bbDropdownMenu>
<div role="option" #listItem tabindex="0">Product 1</div>
</ng-container>
</bb-product-selector-ui>
position
The position input sets the position of the dropdown menu relative to the toggle button.
<!-- Product selector with top positioning -->
<bb-product-selector-ui
[position]="['top-start', 'top-end']">
<ng-container bbDropdownToggle>
<span>Select product</span>
</ng-container>
<ng-container bbDropdownMenu>
<div role="option" #listItem tabindex="0">Product 1</div>
</ng-container>
</bb-product-selector-ui>
Custom templates
The component requires two content projection areas:
bbDropdownToggle
Content projected into the toggle button area. This typically contains the selected item display or placeholder text.
<bb-product-selector-ui>
<ng-container bbDropdownToggle>
@if (selectedProduct) {
<bb-product-item-basic-account-ui
[title]="selectedProduct.name"
[amount]="selectedProduct.amount"
[productNumber]="selectedProduct.productNumber"
currency="EUR">
</bb-product-item-basic-account-ui>
} @else {
<div class="bb-stack">
<span class="bb-text-support bb-product-selector__placeholder">
Select a product
</span>
</div>
}
</ng-container>
<ng-container bbDropdownMenu>
<!-- Menu items -->
</ng-container>
</bb-product-selector-ui>
bbDropdownMenu
Content projected into the dropdown menu area. Each item must follow specific accessibility requirements.
<bb-product-selector-ui>
<ng-container bbDropdownToggle>
<span>Select product</span>
</ng-container>
<ng-container bbDropdownMenu>
<div
*ngFor="let product of products"
(click)="selectProduct(product)"
role="option"
#listItem
tabindex="0"
class="bb-product-selector__dropdown-item"
[ngClass]="{ 'selected': product.id === selectedProduct?.id }">
<bb-product-item-basic-account-ui
[title]="product.name"
[amount]="product.amount"
[productNumber]="product.productNumber"
currency="EUR"
[active]="product.id === selectedProduct?.id">
</bb-product-item-basic-account-ui>
</div>
</ng-container>
</bb-product-selector-ui>
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 |
|---|---|---|
|
ariaActivedescendant |
Identifies the currently active element in the selector |
string |
|
ariaDescribedby |
References an element that describes the widget |
string |
|
ariaLabelForDropdown |
Accessible label for the dropdown menu component |
string |
|
ariaLabelForToggleButton |
Accessible label for the toggle button component |
string |
Dropdown menu item requirements
Every item in the dropdown menu must meet the following accessibility requirements:
- Role: Must have role="option" attribute for screen reader detection
- Template reference: Must have #listItem template reference for keyboard navigation
- Element type: Must use a div HTML element instead of a button
- Tabindex: Must have tabindex="0" for keyboard accessibility
Keyboard navigation
The component provides full keyboard support:
|
Key |
Actions |
|---|---|
|
Enter ↵ / Return ⌤ |
Select the currently focused item |
|
ArrowDown ↓ |
Navigate to next item in the list |
|
ArrowUp ↑ |
Navigate to previous item in the list |
|
Escape |
Close the dropdown menu |
Screen reader support
- Toggle button includes proper ARIA attributes and labels
- Dropdown menu is announced as a listbox with appropriate role
- Current selection state is communicated through ARIA attributes
- Focus management ensures proper navigation flow