Import
import { ProductItemCurrentAccountModule } from '@backbase/ui-ang/product-item-current-account'
Usage
Use the bb-product-item-current-account-ui component to display current account information. The component extends the base product item functionality with current account-specific features including main and secondary sections.
<!-- Basic product item current account usage -->
<bb-product-item-current-account-ui
title="John Doe"
productNumber="4322"
[amount]="1425.99"
currency="EUR"
mainSectionCurrency="EUR"
[mainSectionAmount]="880.54"
mainSectionTitle="Available balance"
secondarySectionCurrency="EUR"
[secondarySectionAmount]="7280.86"
secondarySectionTitle="Credit Limit"
[productDetailsInfo]="{ owner: 'Richard Norton' }">
</bb-product-item-current-account-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
active |
boolean |
true |
|
amount |
number |
undefined |
|
currency |
string |
undefined |
|
favorite |
boolean |
false |
|
favoriteIconColor |
string |
'primary' |
|
highlight |
boolean |
undefined |
|
mainSectionAmount |
number |
undefined |
|
mainSectionCurrency |
string |
undefined |
|
mainSectionTitle |
string |
undefined |
|
moneyProtectionStatus |
MoneyProtectionStatusEnum |
undefined |
|
moneyProtectionStatusClasses |
string |
undefined |
|
productDetailsInfo |
Record<string, any> |
undefined |
|
productNumber |
string |
undefined |
|
productNumberFormat |
PaymentCardNumberFormat |
{ length: 16, maskRange: [0, 12], segments: 4 } |
|
secondarySectionAmount |
number |
undefined |
|
secondarySectionCurrency |
string |
undefined |
|
secondarySectionTitle |
string |
undefined |
|
title |
string |
undefined |
active
The active input determines whether the account should display an active state indicator.
<!-- Product item without active indicator -->
<bb-product-item-current-account-ui
title="Current Account"
[amount]="2500.00"
currency="EUR"
[active]="false">
</bb-product-item-current-account-ui>
amount
The amount input sets the primary balance amount to be displayed on the account card.
<!-- Product item with specific amount -->
<bb-product-item-current-account-ui
title="Main Current Account"
[amount]="3500.75"
currency="USD">
</bb-product-item-current-account-ui>
currency
The currency input sets the currency code for the primary amount display.
<!-- Product item with USD currency -->
<bb-product-item-current-account-ui
title="USD Current Account"
[amount]="4000.00"
currency="USD">
</bb-product-item-current-account-ui>
favorite
The favorite input determines whether the account should display a star icon to indicate it's marked as favorite.
<!-- Product item marked as favorite -->
<bb-product-item-current-account-ui
title="Primary Account"
[amount]="8000.00"
currency="EUR"
[favorite]="true">
</bb-product-item-current-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-current-account-ui
title="Premium Account"
[amount]="15000.00"
currency="EUR"
[favorite]="true"
favoriteIconColor="warning">
</bb-product-item-current-account-ui>
highlight
The highlight input determines whether the amount and currency values should be visually highlighted.
<!-- Product item with highlighted amounts -->
<bb-product-item-current-account-ui
title="Featured Account"
[amount]="12000.00"
currency="EUR"
[highlight]="true">
</bb-product-item-current-account-ui>
mainSectionAmount
The mainSectionAmount input sets the amount to be displayed in the main section below the primary amount.
<!-- Product item with main section amount -->
<bb-product-item-current-account-ui
title="Business Account"
[amount]="5000.00"
currency="EUR"
[mainSectionAmount]="3500.00"
mainSectionCurrency="EUR"
mainSectionTitle="Available Balance">
</bb-product-item-current-account-ui>
mainSectionCurrency
The mainSectionCurrency input sets the currency code for the main section amount.
<!-- Product item with main section currency -->
<bb-product-item-current-account-ui
title="Multi-Currency Account"
[amount]="3000.00"
currency="EUR"
[mainSectionAmount]="2800.00"
mainSectionCurrency="USD"
mainSectionTitle="USD Balance">
</bb-product-item-current-account-ui>
mainSectionTitle
The mainSectionTitle input sets the label text for the main section amount.
<!-- Product item with main section title -->
<bb-product-item-current-account-ui
title="Savings Account"
[amount]="7500.00"
currency="EUR"
[mainSectionAmount]="5000.00"
mainSectionCurrency="EUR"
mainSectionTitle="Available for Transfer">
</bb-product-item-current-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-current-account-ui
title="Protected Account"
[amount]="10000.00"
currency="EUR"
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes">
</bb-product-item-current-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-current-account-ui
title="Insured Account"
[amount]="20000.00"
currency="EUR"
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes"
moneyProtectionStatusClasses="bg-danger-subtle">
</bb-product-item-current-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-current-account-ui
title="Joint Current Account"
[amount]="25000.00"
currency="EUR"
[productDetailsInfo]="{ owner: 'John & Jane Smith' }">
</bb-product-item-current-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-current-account-ui
title="Checking Account"
[amount]="6000.00"
currency="EUR"
productNumber="4322123456789012">
</bb-product-item-current-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-current-account-ui
title="Business Checking"
[amount]="8000.00"
currency="EUR"
productNumber="1234567890123456"
[productNumberFormat]="{ length: 16, maskRange: [0, 12], segments: 4 }">
</bb-product-item-current-account-ui>
secondarySectionAmount
The secondarySectionAmount input sets the amount to be displayed in the secondary section below the main section.
<!-- Product item with secondary section amount -->
<bb-product-item-current-account-ui
title="Premium Account"
[amount]="4500.00"
currency="EUR"
[mainSectionAmount]="3000.00"
mainSectionTitle="Available"
[secondarySectionAmount]="20000.00"
secondarySectionCurrency="EUR"
secondarySectionTitle="Overdraft Limit">
</bb-product-item-current-account-ui>
secondarySectionCurrency
The secondarySectionCurrency input sets the currency code for the secondary section amount.
<!-- Product item with secondary section currency -->
<bb-product-item-current-account-ui
title="International Account"
[amount]="5000.00"
currency="EUR"
[secondarySectionAmount]="4500.00"
secondarySectionCurrency="USD"
secondarySectionTitle="USD Limit">
</bb-product-item-current-account-ui>
secondarySectionTitle
The secondarySectionTitle input sets the label text for the secondary section amount.
<!-- Product item with secondary section title -->
<bb-product-item-current-account-ui
title="Gold Account"
[amount]="6000.00"
currency="EUR"
[secondarySectionAmount]="25000.00"
secondarySectionCurrency="EUR"
secondarySectionTitle="Total Overdraft Limit">
</bb-product-item-current-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-current-account-ui
title="Personal Checking Account"
[amount]="9000.00"
currency="EUR">
</bb-product-item-current-account-ui>
Custom templates
The component supports custom templates for advanced customization:
- bbCustomProductItemCurrentAccountTitle: Custom template for the title area
- bbCustomProductItemCurrentAccountDetailsFormatter: Custom template for the primary amount area
- bbCustomProductItemCurrentAccountMainSection: Custom template for the main section area
- bbCustomProductItemCurrentAccountSecondarySection: Custom template for the secondary section area
<!-- Product item with custom main section template -->
<bb-product-item-current-account-ui title="Custom Account" [amount]="7000" currency="EUR">
<ng-template bbCustomProductItemCurrentAccountMainSection>
<div class="bb-stack bb-stack--wrap bb-block bb-block--sm bb-subtitle bb-text-support">
<span class="bb-stack__item">Available Balance</span>
<span class="bb-stack__item bb-stack__item--push-right bb-stack__item--spacing-none">
€5,500.00
</span>
</div>
</ng-template>
</bb-product-item-current-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 data attributes for account information
- Visual hierarchy: Clear distinction between primary amount, main section, and secondary section
- Internationalization: Built-in i18n support for labels and screen reader text
- Focus management: Proper focus handling for interactive elements
- Currency formatting: Automatic currency formatting and proper display of multiple currency amounts
The component automatically handles different current account information sections with appropriate visual styling and accessibility features, including proper semantic markup for financial information and support for multiple currency displays.