Import
import { ProductItemBasicAccountModule } from '@backbase/ui-ang/product-item-basic-account'
Usage
Use the bb-product-item-basic-account-ui component to display basic account information. The component extends the base product item functionality with account-specific features.
<!-- Basic product item basic account usage -->
<bb-product-item-basic-account-ui
title="Ricardo Norton's Savings Account"
[amount]="83652.32"
productNumber="NL75INGB3400120056"
currency="EUR"
[productNumberFormat]="{ length: 18, maskRange: [0, 0], segments: 4 }">
</bb-product-item-basic-account-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
active |
boolean |
true |
|
amount |
number |
undefined |
|
balanceLabel |
string |
undefined |
|
balanceLabelForSecondaryAmount |
string |
undefined |
|
bankBranchCode |
string |
undefined |
|
currency |
string |
undefined |
|
favorite |
boolean |
false |
|
favoriteIconColor |
string |
'primary' |
|
highlight |
boolean |
undefined |
|
moneyProtectionStatus |
MoneyProtectionStatusEnum |
undefined |
|
moneyProtectionStatusClasses |
string |
undefined |
|
productDetailsInfo |
Record<string, any> |
undefined |
|
productNumber |
string |
undefined |
|
productNumberFormat |
PaymentCardNumberFormat |
{ length: 16, maskRange: [0, 12], segments: 4 } |
|
secondaryAmount |
number |
undefined |
|
selected |
boolean |
false |
|
showCurrencySymbol |
boolean |
true |
|
status |
'closed' | 'inactive' | 'active' |
undefined |
|
title |
string |
undefined |
|
type |
string |
undefined |
active
The active input determines whether the card should display a check icon to indicate it's active or selected.
<!-- Product item without active indicator -->
<bb-product-item-basic-account-ui
title="Account Name"
[amount]="1000"
currency="EUR"
[active]="false">
</bb-product-item-basic-account-ui>
amount
The amount input sets the primary balance amount to be displayed on the card.
<!-- Product item with specific amount -->
<bb-product-item-basic-account-ui
title="Savings Account"
[amount]="15420.50"
currency="USD">
</bb-product-item-basic-account-ui>
balanceLabel
The balanceLabel input sets the text to be placed above the primary amount.
<!-- Product item with balance label -->
<bb-product-item-basic-account-ui
title="Current Account"
[amount]="2500.00"
currency="EUR"
balanceLabel="Available Balance">
</bb-product-item-basic-account-ui>
balanceLabelForSecondaryAmount
The balanceLabelForSecondaryAmount input sets the text to be placed above the secondary amount.
<!-- Product item with secondary amount label -->
<bb-product-item-basic-account-ui
title="Checking Account"
[amount]="1000.00"
[secondaryAmount]="500.00"
currency="EUR"
balanceLabel="Available"
balanceLabelForSecondaryAmount="Pending">
</bb-product-item-basic-account-ui>
bankBranchCode
The bankBranchCode input sets the branch code of the bank to be displayed alongside the product number.
<!-- Product item with bank branch code -->
<bb-product-item-basic-account-ui
title="Business Account"
[amount]="50000.00"
currency="EUR"
productNumber="NL91ABNA0417164300"
bankBranchCode="ABNANL2A">
</bb-product-item-basic-account-ui>
currency
The currency input sets the currency code for the amount display.
<!-- Product item with USD currency -->
<bb-product-item-basic-account-ui
title="USD Account"
[amount]="12500.75"
currency="USD">
</bb-product-item-basic-account-ui>
favorite
The favorite input determines whether the card should display a star icon to indicate it's marked as favorite.
<!-- Product item marked as favorite -->
<bb-product-item-basic-account-ui
title="Main Savings"
[amount]="25000.00"
currency="EUR"
[favorite]="true">
</bb-product-item-basic-account-ui>
favoriteIconColor
The favoriteIconColor input sets the color of the favorite star icon when favorite is true.
<!-- Product item with custom favorite icon color -->
<bb-product-item-basic-account-ui
title="Premium Account"
[amount]="100000.00"
currency="EUR"
[favorite]="true"
favoriteIconColor="warning">
</bb-product-item-basic-account-ui>
highlight
The highlight input determines whether the amount and currency values should be visually highlighted.
<!-- Product item with highlighted amount -->
<bb-product-item-basic-account-ui
title="Featured Account"
[amount]="75000.00"
currency="EUR"
[highlight]="true">
</bb-product-item-basic-account-ui>
moneyProtectionStatus
The moneyProtectionStatus input sets the money protection status indicator. Accepts Yes, No, or NA values from MoneyProtectionStatusEnum.
<!-- Product item with money protection status -->
<bb-product-item-basic-account-ui
title="Insured Account"
[amount]="50000.00"
currency="EUR"
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes">
</bb-product-item-basic-account-ui>
moneyProtectionStatusClasses
The moneyProtectionStatusClasses input allows adding custom CSS classes to the money protection status component.
<!-- Product item with custom money protection styling -->
<bb-product-item-basic-account-ui
title="Protected Account"
[amount]="25000.00"
currency="EUR"
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes"
moneyProtectionStatusClasses="custom-protection-style">
</bb-product-item-basic-account-ui>
productDetailsInfo
The productDetailsInfo input provides additional product information, such as account owners, to be displayed below the main content.
<!-- Product item with product details -->
<bb-product-item-basic-account-ui
title="Joint Account"
[amount]="35000.00"
currency="EUR"
[productDetailsInfo]="{ owners: 'John Doe & Jane Smith' }">
</bb-product-item-basic-account-ui>
productNumber
The productNumber input sets the account number to be displayed, formatted according to productNumberFormat.
<!-- Product item with product number -->
<bb-product-item-basic-account-ui
title="Savings Account"
[amount]="15000.00"
currency="EUR"
productNumber="NL91ABNA0417164300">
</bb-product-item-basic-account-ui>
productNumberFormat
The productNumberFormat input configures how the product number should be formatted and masked.
<!-- Product item with custom number formatting -->
<bb-product-item-basic-account-ui
title="Business Account"
[amount]="75000.00"
currency="EUR"
productNumber="NL91ABNA0417164300"
[productNumberFormat]="{ length: 18, maskRange: [0, 0], segments: 4 }">
</bb-product-item-basic-account-ui>
secondaryAmount
The secondaryAmount input sets a secondary balance amount to be displayed below the primary amount (e.g., pending balance).
<!-- Product item with secondary amount -->
<bb-product-item-basic-account-ui
title="Current Account"
[amount]="2500.00"
[secondaryAmount]="150.00"
currency="EUR">
</bb-product-item-basic-account-ui>
selected
The selected input determines whether the card is in a selected state. When true, it removes the check mark and can display a custom type icon instead.
<!-- Product item in selected state -->
<bb-product-item-basic-account-ui
title="Selected Account"
[amount]="10000.00"
currency="EUR"
[selected]="true"
type="account">
</bb-product-item-basic-account-ui>
showCurrencySymbol
The showCurrencySymbol input determines whether to display the currency symbol alongside the amount.
<!-- Product item without currency symbol -->
<bb-product-item-basic-account-ui
title="Account Name"
[amount]="5000.00"
currency="EUR"
[showCurrencySymbol]="false">
</bb-product-item-basic-account-ui>
status
The status input sets the current account status, affecting the visual appearance and displaying status indicators.
<!-- Product item with inactive status -->
<bb-product-item-basic-account-ui
title="Inactive Account"
[amount]="0.00"
currency="EUR"
status="inactive">
</bb-product-item-basic-account-ui>
title
The title input sets the account name or title to be displayed as the main heading.
<!-- Product item with custom title -->
<bb-product-item-basic-account-ui
title="Emergency Fund Account"
[amount]="10000.00"
currency="EUR">
</bb-product-item-basic-account-ui>
type
The type input sets the icon name to be displayed when the item is selected selected=true).
<!-- Product item with type icon when selected -->
<bb-product-item-basic-account-ui
title="Account Name"
[amount]="5000.00"
currency="EUR"
[selected]="true"
type="savings">
</bb-product-item-basic-account-ui>
Custom templates
The component supports custom templates for advanced customization:
- bbCustomProductItemBasicAccountType: Custom template for the type/icon area
- bbCustomProductItemBasicAccountTitle: Custom template for the title area
- bbCustomProductItemBasicAccountDetailsFormatter: Custom template for the details/amount area
<!-- Product item with custom title template -->
<bb-product-item-basic-account-ui [amount]="10000" currency="EUR">
<ng-template bbCustomProductItemBasicAccountTitle>
<div class="custom-title">
<strong>My Custom Account Title</strong>
<span class="subtitle">Premium Account</span>
</div>
</ng-template>
</bb-product-item-basic-account-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.
- Screen reader support: Proper labeling for account numbers, balances, and status information
- Semantic structure: Uses appropriate HTML elements and ARIA labels for account information
- Visual indicators: Clear status indicators for closed and inactive accounts with icons and text
- Internationalization: Built-in i18n support for status labels and screen reader text
- Focus management: Proper focus handling for interactive elements
- Currency formatting: Automatic currency symbol mapping and proper formatting
The component automatically handles different account statuses with appropriate visual styling and accessibility features, including hidden labels for screen readers and proper semantic markup for financial information.