Import
import { ProductItemInvestmentAccountModule } from '@backbase/ui-ang/product-item-investment-account'
Usage
Use the bb-product-item-investment-account-ui component to display investment account information. The component extends the base product item functionality with investment account-specific features and simplified layout focused on balance and account identification.
<!-- Basic product item investment account usage -->
<bb-product-item-investment-account-ui
title="John Doe"
productNumber="NL75 INGB 3000 1200 56"
[amount]="13425.99"
currency="EUR"
[productNumberFormat]="{ length: 18, maskRange: [0, 0], segments: 4 }">
</bb-product-item-investment-account-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
active |
boolean |
true |
|
amount |
number |
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 } |
|
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-investment-account-ui
title="Investment Account"
[amount]="25000.00"
currency="EUR"
[active]="false">
</bb-product-item-investment-account-ui>
amount
The amount input sets the investment balance amount to be displayed on the account card.
<!-- Product item with specific investment amount -->
<bb-product-item-investment-account-ui
title="Portfolio Account"
[amount]="45750.25"
currency="USD">
</bb-product-item-investment-account-ui>
currency
The currency input sets the currency code for the investment amount display.
<!-- Product item with USD currency -->
<bb-product-item-investment-account-ui
title="USD Investment Portfolio"
[amount]="60000.00"
currency="USD">
</bb-product-item-investment-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-investment-account-ui
title="Primary Investment Account"
[amount]="80000.00"
currency="EUR"
[favorite]="true">
</bb-product-item-investment-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-investment-account-ui
title="Premium Portfolio"
[amount]="150000.00"
currency="EUR"
[favorite]="true"
favoriteIconColor="warning">
</bb-product-item-investment-account-ui>
highlight
The highlight input determines whether the investment amount and currency values should be visually highlighted.
<!-- Product item with highlighted amounts -->
<bb-product-item-investment-account-ui
title="Featured Investment Account"
[amount]="120000.00"
currency="EUR"
[highlight]="true">
</bb-product-item-investment-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-investment-account-ui
title="Protected Investment Account"
[amount]="100000.00"
currency="EUR"
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes">
</bb-product-item-investment-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-investment-account-ui
title="Insured Portfolio"
[amount]="200000.00"
currency="EUR"
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes"
moneyProtectionStatusClasses="bg-danger-subtle">
</bb-product-item-investment-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-investment-account-ui
title="Joint Investment Account"
[amount]="250000.00"
currency="EUR"
[productDetailsInfo]="{ owners: 'John & Jane Smith' }">
</bb-product-item-investment-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-investment-account-ui
title="Retirement Portfolio"
[amount]="75000.00"
currency="EUR"
productNumber="NL75 INGB 3000 1200 56">
</bb-product-item-investment-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-investment-account-ui
title="Growth Portfolio"
[amount]="90000.00"
currency="EUR"
productNumber="DE89 3704 0044 0532 0130 00"
[productNumberFormat]="{ length: 22, maskRange: [0, 0], segments: 6 }">
</bb-product-item-investment-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-investment-account-ui
title="Diversified Investment Portfolio"
[amount]="180000.00"
currency="EUR">
</bb-product-item-investment-account-ui>
Custom templates
The component supports custom templates for advanced customization:
- bbCustomProductItemInvestmentAccountTitle: Custom template for the title area
- bbCustomProductItemInvestmentAccountDetailsFormatter: Custom template for the amount display area
<!-- Product item with custom templates -->
<bb-product-item-investment-account-ui title="Custom Portfolio" [amount]="95000" currency="EUR">
<ng-template bbCustomProductItemInvestmentAccountTitle>
<div class="custom-title">
<strong>{{ title }}</strong>
<div class="custom-subtitle">High-Growth Portfolio</div>
</div>
</ng-template>
<ng-template bbCustomProductItemInvestmentAccountDetailsFormatter>
<div class="custom-amount">
<strong>Portfolio Value:</strong>
<span class="highlight">€95,000.00</span>
<div class="performance">+12.5% YTD</div>
</div>
</ng-template>
</bb-product-item-investment-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, investment balances, and status information
- Semantic structure: Uses appropriate HTML elements and data attributes for investment account information
- Visual hierarchy: Clear distinction between account title and investment balance
- Internationalization: Built-in i18n support for labels and screen reader text
- Focus management: Proper focus handling for interactive elements
- Currency formatting: Automatic currency formatting for investment amounts
The component automatically handles investment account information display with appropriate visual styling and accessibility features, including proper semantic markup for financial information and investment-specific data presentation.