Import
import { ProductItemTermDepositModule } from '@backbase/ui-ang/product-item-term-deposit'
Usage
Use the bb-product-item-term-deposit-ui component to display term deposit account information. The component provides a structured layout with customizable sections for title, amount, and additional details.
<!-- Basic term deposit usage -->
<bb-product-item-term-deposit-ui
title="Term Deposit Account"
[amount]="200000"
currency="EUR"
productNumber="NL75 INGB 2000 1200 56"
[productNumberFormat]="{ length: 18, maskRange: [0, 0], segments: 4 }"
[mainSectionAmount]="1234"
mainSectionTitle="Available balance">
</bb-product-item-term-deposit-ui>
Money protection integration
When using the money protection features, ensure you provide the BB_MONEY_PROTECTION_STATUS_CONFIG_TOKEN in your module or component providers:
import {
BB_MONEY_PROTECTION_STATUS_CONFIG_TOKEN,
MoneyProtectionStatusConfig,
MoneyProtectionStatusEnum
} from '@backbase/ui-ang/money-protection';
const moneyProtectionConfig: MoneyProtectionStatusConfig = {
messagePerStatus: {
[MoneyProtectionStatusEnum.Yes]: { message: 'is insured by the FDIC.' },
[MoneyProtectionStatusEnum.No]: { message: 'not insured by the FDIC.' },
[MoneyProtectionStatusEnum.NA]: { message: 'not available.' },
},
};
// In your module providers
providers: [
{
provide: BB_MONEY_PROTECTION_STATUS_CONFIG_TOKEN,
useValue: moneyProtectionConfig,
},
]
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 controls whether the product item appears in an active state with visual indicators.
<!-- Term deposit with active state disabled -->
<bb-product-item-term-deposit-ui
[active]="false"
title="Closed Term Deposit">
</bb-product-item-term-deposit-ui>
amount
The amount input sets the primary amount value displayed prominently in the product item.
<!-- Term deposit with specific amount -->
<bb-product-item-term-deposit-ui
[amount]="200000"
currency="EUR"
title="High-Yield Term Deposit">
</bb-product-item-term-deposit-ui>
currency
The currency input specifies the currency code for the main amount display.
<!-- Term deposit in USD currency -->
<bb-product-item-term-deposit-ui
currency="USD"
[amount]="250000"
title="USD Term Deposit">
</bb-product-item-term-deposit-ui>
favorite
The favorite input adds a star icon to indicate the account is marked as a favorite.
<!-- Term deposit marked as favorite -->
<bb-product-item-term-deposit-ui
[favorite]="true"
title="Primary Term Deposit"
[amount]="200000"
currency="EUR">
</bb-product-item-term-deposit-ui>
favoriteIconColor
The favoriteIconColor input sets the color of the favorite star icon when favorite is true.
<!-- Term deposit with custom favorite icon color -->
<bb-product-item-term-deposit-ui
favoriteIconColor="warning"
[favorite]="true"
title="Premium Term Deposit"
[amount]="500000"
currency="EUR">
</bb-product-item-term-deposit-ui>
highlight
The highlight input determines whether the amount values should be visually highlighted for emphasis.
<!-- Term deposit with highlighted amounts -->
<bb-product-item-term-deposit-ui
[highlight]="true"
title="Term Deposit Account"
[amount]="200000"
currency="EUR">
</bb-product-item-term-deposit-ui>
mainSectionAmount
The mainSectionAmount input displays an additional amount in the main section, typically used for available balance, interest earned, or other relevant financial information.
<!-- Term deposit with main section amount -->
<bb-product-item-term-deposit-ui
[mainSectionAmount]="5000"
mainSectionTitle="Interest earned to date"
title="Term Deposit Account"
[amount]="200000"
currency="EUR">
</bb-product-item-term-deposit-ui>
mainSectionCurrency
The mainSectionCurrency input specifies the currency for the additional main section amount, if different from the primary currency.
<!-- Term deposit with different main section currency -->
<bb-product-item-term-deposit-ui
mainSectionCurrency="USD"
[mainSectionAmount]="2500"
mainSectionTitle="USD equivalent"
title="Multi-Currency Term Deposit"
[amount]="200000"
currency="EUR">
</bb-product-item-term-deposit-ui>
mainSectionTitle
The mainSectionTitle input provides a label for the main section amount, explaining what the additional amount represents.
<!-- Term deposit with descriptive main section -->
<bb-product-item-term-deposit-ui
mainSectionTitle="Projected maturity value"
[mainSectionAmount]="2500"
title="6-Month Term Deposit"
[amount]="100000"
currency="EUR">
</bb-product-item-term-deposit-ui>
moneyProtectionStatus
The moneyProtectionStatus input indicates the insurance status of the term deposit using predefined enum values (Yes, No, or NA).
<!-- Term deposit with money protection status -->
<bb-product-item-term-deposit-ui
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes"
title="Insured Term Deposit"
[amount]="200000"
currency="EUR">
</bb-product-item-term-deposit-ui>
moneyProtectionStatusClasses
The moneyProtectionStatusClasses input allows customization of the CSS classes applied to the money protection status display.
<!-- Term deposit with custom protection status styling -->
<bb-product-item-term-deposit-ui
moneyProtectionStatusClasses="bg-success-subtle"
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes"
title="Protected Term Deposit"
[amount]="200000"
currency="EUR">
</bb-product-item-term-deposit-ui>
productDetailsInfo
The productDetailsInfo input accepts additional product information, including owner details that will be displayed at the bottom of the component.
<!-- Term deposit with owner information -->
<bb-product-item-term-deposit-ui
[productDetailsInfo]="{ owners: 'John Doe, Jane Smith' }"
title="Term Deposit Account"
[amount]="200000"
currency="EUR">
</bb-product-item-term-deposit-ui>
productNumber
The productNumber input displays the account or product identification number, formatted according to the productNumberFormat configuration.
<!-- Term deposit with product number -->
<bb-product-item-term-deposit-ui
productNumber="NL75 INGB 2000 1200 56"
title="Term Deposit Account"
[amount]="200000"
currency="EUR">
</bb-product-item-term-deposit-ui>
productNumberFormat
The productNumberFormat input configures how the product number should be displayed, including masking and segmentation options.
<!-- Term deposit with custom number formatting -->
<bb-product-item-term-deposit-ui
[productNumberFormat]="{ length: 16, maskRange: [4, 12], segments: 4 }"
productNumber="1234567890123456"
title="Term Deposit Account"
[amount]="200000"
currency="EUR">
</bb-product-item-term-deposit-ui>
title
The title input sets the main title displayed in the product item header. Typically used for the account name or account holder's name.
<!-- Term deposit with custom title -->
<bb-product-item-term-deposit-ui
title="John Doe's Term Deposit"
[amount]="150000"
currency="USD">
</bb-product-item-term-deposit-ui>
Custom templates
The component supports three custom template directives for advanced customization:
bbCustomProductItemTermDepositTitle
Replace the default title section with custom content.
<bb-product-item-term-deposit-ui [amount]="200000" currency="EUR">
<ng-template bbCustomProductItemTermDepositTitle>
<div class="custom-title">
<h3>Premium Term Deposit</h3>
<span class="badge">VIP Account</span>
</div>
</ng-template>
</bb-product-item-term-deposit-ui>
bbCustomProductItemTermDepositDetailsFormatter
Customize the amount display section with custom formatting.
<bb-product-item-term-deposit-ui title="Term Deposit Account" [amount]="200000" currency="EUR">
<ng-template bbCustomProductItemTermDepositDetailsFormatter>
<div class="custom-amount">
<strong>Balance:</strong>
<span class="amount-value">{{ amount | currency:currency }}</span>
</div>
</ng-template>
</bb-product-item-term-deposit-ui>
bbCustomProductItemTermDepositMainSection
Replace the default main section with completely custom content.
<bb-product-item-term-deposit-ui title="Term Deposit Account" [amount]="200000" currency="EUR">
<ng-template bbCustomProductItemTermDepositMainSection>
<div class="custom-main-section">
<div class="maturity-info">
<span>Maturity Date: 2024-12-31</span>
<span>Interest Rate: 3.5%</span>
</div>
</div>
</ng-template>
</bb-product-item-term-deposit-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 labels: Appropriate ARIA attributes for screen readers
- Semantic HTML: Proper heading structure and semantic elements
- Keyboard navigation: Full keyboard support for interactive elements
- Screen reader support: All content is properly announced to assistive technologies
- Focus management: Clear focus indicators and logical tab order
- High contrast support: Compatible with high contrast modes and themes
The component automatically handles responsive behavior and maintains accessibility standards across different screen sizes and interaction methods.