Import
import { AccountSelectorModule } from '@backbase/ui-ang/account-selector'
Usage
Use the bb-account-selector-ui component to render an account selector and use its API.
<!-- Basic account selector usage with items -->
<bb-account-selector-ui [items]="accounts"></bb-account-selector-ui>
Custom templates
The account selector component allows using custom templates on its elements. This is especially useful when you need full control over how the presentation of account items. If a template is not provided, then the default account selector item will be rendered.
<bb-account-selector-ui #accountSelector [items]="items" [selectedItems]="selectedItems">
<ng-template bbCustomSingleSelectedItemLabel let-item="item"></ng-template>
<ng-template bbCustomMultiSelectedItemsLabel let-items="items"></ng-template>
<ng-template bbCustomOptionItem let-item="item" let-item$="item$" let-index="index"></ng-template>
<ng-template bbCustomOptionsHeader></ng-template>
<ng-template bbCustomGroupItemsHeader let-item="item"></ng-template>
<ng-template bbCustomLoadingTemplate></ng-template>
</bb-account-selector-ui>
Money protection
In some countries, a clear indication of which products are protected by a government deposit protection scheme is required. You can enable relevant labels using the moneyProtectionStatus and moneyProtectionStatusClasses inputs on the bb-product-item-basic-account-ui component to indicate the protection status of individual products, accounts and deposits.
items: [{
id: '1',
name: 'Mrs J. Smith',
availableBalance: 5234.7,
balance: 102.1,
number: 'GB29NWBK60161331926819',
currency: 'EUR',
favorite: true,
status: 'inactive',
bankBranchCode: '01788902',
moneyProtectionStatus: MoneyProtectionStatusEnum.Yes,
moneyProtectionStatusClasses: 'bg-danger-subtle',
}]
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
accountSelectorInstructions |
string |
"Account selector component. It allows to select multiple accounts by selecting from a dropdown list. To select or deselect all items use left and right buttons." |
|
appendTo |
string |
undefined |
|
clearable |
boolean |
false |
|
closeOnSelect |
boolean |
true |
|
compareItemsWith |
(a, b) => boolean |
(a, b) => a === b |
|
disabled |
boolean |
false |
|
disableScrollEnd |
boolean |
false |
|
dropdownPosition |
string |
bottom |
|
filterItems |
boolean |
false |
|
forceError |
boolean |
false |
|
groupByFn |
function |
undefined |
|
groupValueFn |
function |
(name, children) => ({ name, total: children.length }) |
|
highlight |
boolean |
true |
|
internalFiltering |
boolean |
true |
|
isOpen |
boolean |
undefined |
|
items |
any[] |
[] |
|
loading |
boolean |
false |
|
markFirst |
boolean |
false |
|
minTermLength |
number |
undefined |
|
moneyProtectionDisclaimerClasses |
string |
undefined |
|
multiple |
boolean |
false |
|
notFoundText (deprecated) |
string |
"No items found" |
|
notFoundConfig |
AccountSelectorNotFoundConfig |
{ title: ‘No results to show‘, image: ‘ic_scenario_search‘, subtitle: ‘Try to reload the page or contact the system administrator.‘ } |
|
placeholder |
string |
'' |
|
productNumberFormat |
PaymentCardNumberFormat |
DefaultPaymentCardNumberFormat |
|
required |
boolean |
false |
|
searchable |
boolean |
true |
|
searchFunc |
function |
undefined |
|
selectedItems |
any[] |
[] |
|
showAvailableBalance |
BalanceDetailsView |
undefined |
|
showBankBranchCode |
boolean |
false |
|
showCurrencySymbol |
boolean |
true |
|
size |
'sm' | 'md' |
undefined |
|
tooltipTrigger |
string |
'hover focus' |
|
typeahead |
Subject<string> |
undefined |
|
typeToSearchText |
string |
undefined |
|
virtualScroll |
boolean |
false |
accountSelectorInstructions
The accountSelectorInstructions input sets the instructions text for the account selector. It’s meant to provide guidance on how to select multiple accounts from the dropdown list.
<!-- Account selector with custom instructions -->
<bb-account-selector-ui
[accountSelectorInstructions]="Select one or more accounts."
[items]="accounts"
></bb-account-selector-ui>
appendTo
The appendTo input specifies the container element to which the dropdown will be appended.
<!-- Account selector with dropdown appended to body -->
<bb-account-selector-ui
[appendTo]="body"
[items]="accounts"
></bb-account-selector-ui>
clearable
The clearable input allows the user to clear the selected value(s).
<!-- Account selector with clearable enabled -->
<bb-account-selector-ui
[clearable]="true"
[items]="accounts"
></bb-account-selector-ui>
closeOnSelect
The closeOnSelect input determines whether the dropdown closes after selecting a value.
<!-- Account selector with closeOnSelect disabled -->
<bb-account-selector-ui
[closeOnSelect]="false"
[items]="accounts"
></bb-account-selector-ui>
compareItemsWith
The compareItemsWith input provides a custom comparison function for items. The function compares the option values with the selected values. Its first argument is a value from an option; its second one is a value from the selection (model). The function should return a boolean value.
<!-- Account selector with custom compareItemsWith function -->
<bb-account-selector-ui
[compareItemsWith]="compareFn"
[items]="accounts"
></bb-account-selector-ui>
disabled
The disabled input disables the account selector.
<!-- Disabled account selector -->
<bb-account-selector-ui
[disabled]="true"
[items]="accounts"
></bb-account-selector-ui>
disableScrollEnd
The disableScrollEnd input disables the scrollEnd event emission.
<!-- Account selector with scroll end event disabled -->
<bb-account-selector-ui
[disableScrollEnd]="true"
[items]="accounts"
></bb-account-selector-ui>
dropdownPosition
The dropdownPosition input sets the dropdown position. Possible values: 'bottom', 'top', 'auto'.
<!-- Account selector with dropdown positioned at the top -->
<bb-account-selector-ui
[dropdownPosition]="top"
[items]="accounts"
></bb-account-selector-ui>
filterItems
The filterItems input enables filtering of items.
<!-- Account selector with item filtering enabled -->
<bb-account-selector-ui
[filterItems]="true"
[items]="accounts"
></bb-account-selector-ui>
forceError
The forceError input always shows an error border around the account selector. It returns a {forcedError: true} validation, which can be used to assign an error message.
<!-- Account selector with forced error state -->
<bb-account-selector-ui
[forceError]="true"
[items]="accounts">
</bb-account-selector-ui>
groupByFn
The groupByFn input allows grouping items by a key or function.
<!-- Account selector with custom groupByFn -->
<bb-account-selector-ui
[groupByFn]="groupFn"
[items]="accounts"
></bb-account-selector-ui>
groupValueFn
The groupValueFn input provides a function to generate group values.
<!-- Account selector with custom groupValueFn -->
<bb-account-selector-ui
[groupValueFn]="groupValueFn"
[items]="accounts"
></bb-account-selector-ui>
highlight
The highlight input enables or disables highlighting in child product items.
<!-- Account selector with highlight disabled -->
<bb-account-selector-ui
[highlight]="false"
[items]="accounts"
></bb-account-selector-ui>
internalFiltering
The internalFiltering input enables NgSelect internal filtering functionality.
<!-- Account selector with internal filtering disabled -->
<bb-account-selector-ui
[internalFiltering]="false"
[items]="accounts"
></bb-account-selector-ui>
isOpen
The isOpen input allows manual control of dropdown opening and closing. When set to true, it won’t allow closing the dropdown menu; when set to false, it won’t open.
<!-- Account selector with dropdown open -->
<bb-account-selector-ui
[isOpen]="true"
[items]="accounts"
></bb-account-selector-ui>
items
The items input provides the list of accounts to select from.
<!-- Account selector with items -->
<bb-account-selector-ui [items]="accounts"></bb-account-selector-ui>
loading
The loading input sets the loading state for async item loading.
<!-- Account selector in loading state -->
<bb-account-selector-ui
[loading]="true"
[items]="accounts"
></bb-account-selector-ui>
markFirst
The markFirst input marks the first item as focused when opening or filtering.
<!-- Account selector with first item marked on open -->
<bb-account-selector-ui
[markFirst]="true"
[items]="accounts"
></bb-account-selector-ui>
minTermLength
The minTermLength input sets the minimum term length to start a search (used with typeahead).
<!-- Account selector with minimum term length for search -->
<bb-account-selector-ui
[minTermLength]="3"
[items]="accounts"
></bb-account-selector-ui>
moneyProtectionDisclaimerClasses
The moneyProtectionDisclaimerClasses input adds classes to the money protection disclaimer.
<!-- Account selector with custom disclaimer classes -->
<bb-account-selector-ui
[moneyProtectionDisclaimerClasses]="'custom-class'"
[items]="accounts"
></bb-account-selector-ui>
multiple
The multiple input allows selecting multiple accounts.
<!-- Account selector with multiple selection enabled -->
<bb-account-selector-ui
[multiple]="true"
[items]="accounts"
></bb-account-selector-ui>
notFoundText
The notFoundText input customizes the not found message.
<!-- Account selector with custom not found config -->
<bb-account-selector-ui
notFoundText="No items"
[items]="accounts"
></bb-account-selector-ui>
noFoundConfig
Configures the "not found" state appearance when no items match search criteria.
<bb-account-selector-ui
[items]="accounts"
[notFoundConfig]="{
title: 'No accounts available',
image: 'ic_empty_state',
subtitle: 'Please contact support'
}">
</bb-account-selector-ui>
placeholder
The placeholder input sets the placeholder text.
<!-- Account selector with custom placeholder -->
<bb-account-selector-ui
[placeholder]="Select an account"
[items]="accounts"
></bb-account-selector-ui>
productNumberFormat
The productNumberFormat input configures how the product number should be formatted.
<!-- Account selector with custom product number format -->
<bb-account-selector-ui
[productNumberFormat]="customFormat"
[items]="accounts"
></bb-account-selector-ui>
required
The required input enables required validation for the account selector.
<!-- Account selector with required validation -->
<bb-account-selector-ui
[required]="true"
[items]="accounts"
></bb-account-selector-ui>
searchable
The searchable input enables searching for values.
<!-- Account selector with search disabled -->
<bb-account-selector-ui
[searchable]="false"
[items]="accounts"
></bb-account-selector-ui>
searchFunc
The searchFunc input allows applying a custom search function.
<!-- Account selector with custom search function -->
<bb-account-selector-ui
[searchFunc]="searchFn"
[items]="accounts">
</bb-account-selector-ui>
selectedItems
The selectedItems input sets the selected account(s).
<!-- Account selector with preselected items -->
<bb-account-selector-ui
[selectedItems]="selectedAccounts"
[items]="accounts"
></bb-account-selector-ui>
showAvailableBalance
The showAvailableBalance input determines how balance details are rendered.
<!-- Account selector showing available balance -->
<bb-account-selector-ui
[showAvailableBalance]="'available'"
[items]="accounts"
></bb-account-selector-ui>
showBankBranchCode
The showBankBranchCode input shows the bank branch code.
<!-- Account selector with bank branch code shown -->
<bb-account-selector-ui
[showBankBranchCode]="true"
[items]="accounts"
></bb-account-selector-ui>
showCurrencySymbol
The showCurrencySymbol input shows the currency symbol in the amount.
<!-- Account selector with currency symbol hidden -->
<bb-account-selector-ui
[showCurrencySymbol]="false"
[items]="accounts"
></bb-account-selector-ui>
size
The size input sets the view size of the account selector. Possible values: 'sm', 'md'.
<!-- Account selector with small size -->
<bb-account-selector-ui
[size]="sm"
[items]="accounts"
></bb-account-selector-ui>
tooltipTrigger
The tooltipTrigger input sets the trigger behavior for tooltips.
<!-- Account selector with tooltip trigger set to click -->
<bb-account-selector-ui
[tooltipTrigger]="'click'"
[items]="accounts"
></bb-account-selector-ui>
typeahead
The typeahead input enables custom autocomplete or advanced filtering.
<!-- Account selector with typeahead enabled -->
<bb-account-selector-ui
[typeahead]="typeaheadSubject"
[items]="accounts"
></bb-account-selector-ui>
typeToSearchText
The typeToSearchText input sets custom text when using typeahead.
<!-- Account selector with custom type to search text -->
<bb-account-selector-ui
[typeToSearchText]="Type to search accounts"
[items]="accounts"
></bb-account-selector-ui>
virtualScroll
The virtualScroll input enables virtual scrolling for large lists.
<!-- Account selector with virtual scroll enabled -->
<bb-account-selector-ui
[virtualScroll]="true"
[items]="accounts"
></bb-account-selector-ui>
Outputs
|
Output |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<void> |
Emits when the account selector is blurred |
|
change |
EventEmitter<object | object[]> |
Emits when the selected items change. Payload is the selected item(s) |
|
clearSearch |
EventEmitter<void> |
Emits when the search is cleared |
|
filterChange |
EventEmitter<string> |
Emits when the filter value changes. Payload is the filter string |
|
focus |
EventEmitter<void> |
Emits when the account selector is focused |
|
remove |
EventEmitter<any> |
Emits when an item is removed. Payload is the removed item |
|
scroll |
EventEmitter<{ start: number; end: number }> |
Emits when scroll is triggered (virtual scroll). Payload is the scroll range |
|
scrollToEnd |
EventEmitter<void> |
Emits when scroll reaches the end |
|
search |
EventEmitter<string> |
Emits when a search is performed. Payload is the search term |
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 |
|---|---|---|
|
aria-describedby |
It sets the ID of the element that contains a detailed description of the widget. It establishes a relationship between widgets or groups and the text that describes them. |
string |
|
aria-invalid |
It indicates whether the value entered doesn’t comply with the format the app expects. |
string |