Import
import { ProductItemSavingsAccountModule } from '@backbase/ui-ang/product-item-savings-account'
Usage
Use the bb-product-item-savings-account-ui component to display savings account information. The component extends the base product item functionality with savings account-specific features including a main section for additional balance information.
<!-- Basic product item savings account usage -->
<bb-product-item-savings-account-ui
title="John Doe"
productNumber="NL75 INGB 2000 1200 56"
[amount]="177425.99"
currency="EUR"
[productNumberFormat]="{ length: 18, maskRange: [0, 0], segments: 4 }"
[mainSectionAmount]="1234"
mainSectionTitle="Available balance">
</bb-product-item-savings-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 } |
|
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-savings-account-ui
[active]="false"
title="Savings Account"
[amount]="25000.00"
currency="EUR">
</bb-product-item-savings-account-ui>
amount
The amount input sets the primary savings balance amount to be displayed on the account card.
<!-- Product item with specific savings amount -->
<bb-product-item-savings-account-ui
[amount]="45750.25"
title="High Yield Savings"
currency="USD">
</bb-product-item-savings-account-ui>
currency
The currency input sets the currency code for the savings amount display.
<!-- Product item with USD currency -->
<bb-product-item-savings-account-ui
currency="USD"
title="USD Savings Account"
[amount]="60000.00">
</bb-product-item-savings-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-savings-account-ui
[favorite]="true"
title="Primary Savings Account"
[amount]="80000.00"
currency="EUR">
</bb-product-item-savings-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-savings-account-ui
favoriteIconColor="warning"
title="Premium Savings"
[amount]="150000.00"
currency="EUR"
[favorite]="true">
</bb-product-item-savings-account-ui>
highlight
The highlight input determines whether the savings amount and currency values should be visually highlighted.
<!-- Product item with highlighted amounts -->
<bb-product-item-savings-account-ui
[highlight]="true"
title="Featured Savings Account"
[amount]="120000.00"
currency="EUR">
</bb-product-item-savings-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-savings-account-ui
[mainSectionAmount]="5000.00"
title="Growth Savings"
[amount]="25000.00"
currency="EUR"
mainSectionCurrency="EUR"
mainSectionTitle="Available for Transfer">
</bb-product-item-savings-account-ui>
mainSectionCurrency
The mainSectionCurrency input sets the currency code for the main section amount.
<!-- Product item with main section currency -->
<bb-product-item-savings-account-ui
mainSectionCurrency="USD"
title="Multi-Currency Savings"
[amount]="30000.00"
currency="EUR"
[mainSectionAmount]="28000.00"
mainSectionTitle="USD Balance">
</bb-product-item-savings-account-ui>
mainSectionTitle
The mainSectionTitle input sets the label text for the main section amount.
<!-- Product item with main section title -->
<bb-product-item-savings-account-ui
mainSectionTitle="Interest Earned YTD"
title="High Interest Savings"
[amount]="75000.00"
currency="EUR"
[mainSectionAmount]="2500.00"
mainSectionCurrency="EUR">
</bb-product-item-savings-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-savings-account-ui
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes"
title="Protected Savings Account"
[amount]="100000.00"
currency="EUR">
</bb-product-item-savings-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-savings-account-ui
moneyProtectionStatusClasses="bg-danger-subtle"
title="Insured Savings"
[amount]="200000.00"
currency="EUR"
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes">
</bb-product-item-savings-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-savings-account-ui
[productDetailsInfo]="{ owners: 'John & Jane Smith' }"
title="Joint Savings Account"
[amount]="250000.00"
currency="EUR">
</bb-product-item-savings-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-savings-account-ui
productNumber="NL75 INGB 2000 1200 56"
title="Premium Savings"
[amount]="85000.00"
currency="EUR">
</bb-product-item-savings-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-savings-account-ui
[productNumberFormat]="{ length: 22, maskRange: [0, 0], segments: 6 }"
title="European Savings"
[amount]="95000.00"
currency="EUR"
productNumber="DE89 3704 0044 0532 0130 00">
</bb-product-item-savings-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-savings-account-ui
title="Emergency Fund Savings Account"
[amount]="50000.00"
currency="EUR">
</bb-product-item-savings-account-ui>
Custom templates
The component supports custom templates for advanced customization:
- bbCustomProductItemSavingsAccountTitle: Custom template for the title area
- bbCustomProductItemSavingsAccountDetailsFormatter: Custom template for the primary amount display area
- bbCustomProductItemSavingsAccountMainSection: Custom template for the main section area
<!-- Product item with custom main section template -->
<bb-product-item-savings-account-ui title="Custom Savings" [amount]="75000" currency="EUR">
<ng-template bbCustomProductItemSavingsAccountMainSection>
<div class="bb-stack bb-stack--wrap">
<span class="bb-stack__item">
Interest Rate
</span>
<span class="bb-stack__item bb-stack__item--push-right bb-stack__item--spacing-none">
2.5% APY
</span>
</div>
</ng-template>
</bb-product-item-savings-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, savings balances, and status information
- Semantic structure: Uses appropriate HTML elements and data attributes for savings account information
- Visual hierarchy: Clear distinction between primary amount and main 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 savings account information display with appropriate visual styling and accessibility features, including proper semantic markup for financial information and support for main section display of additional savings-related data.