Import
import { ProductItemLoanModule } from '@backbase/ui-ang/product-item-loan'
Usage
Use the bb-product-item-loan-ui component to display loan information. The component extends the base product item functionality with loan-specific features and simplified layout focused on loan amount and identification.
<!-- Basic product item loan usage -->
<bb-product-item-loan-ui
title="John Doe"
productNumber="NL75 INGB 3400 1200 56"
[amount]="15000.0"
currency="EUR"
[productNumberFormat]="{ length: 18, maskRange: [0, 0], segments: 4 }"
[productDetailsInfo]="{ owners: 'Ricardo Norton' }">
</bb-product-item-loan-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 loan should display an active state indicator.
<!-- Product item without active indicator -->
<bb-product-item-loan-ui
title="Personal Loan"
[amount]="25000.00"
currency="EUR"
[active]="false">
</bb-product-item-loan-ui>
amount
The amount input sets the loan amount to be displayed on the loan card.
<!-- Product item with specific loan amount -->
<bb-product-item-loan-ui
title="Home Improvement Loan"
[amount]="35000.00"
currency="USD">
</bb-product-item-loan-ui>
currency
The currency input sets the currency code for the loan amount display.
<!-- Product item with USD currency -->
<bb-product-item-loan-ui
title="USD Business Loan"
[amount]="50000.00"
currency="USD">
</bb-product-item-loan-ui>
favorite
The favorite input determines whether the loan should display a star icon to indicate it's marked as favorite.
<!-- Product item marked as favorite -->
<bb-product-item-loan-ui
title="Primary Mortgage"
[amount]="250000.00"
currency="EUR"
[favorite]="true">
</bb-product-item-loan-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-loan-ui
title="Premium Loan"
[amount]="100000.00"
currency="EUR"
[favorite]="true"
favoriteIconColor="warning">
</bb-product-item-loan-ui>
highlight
The highlight input determines whether the loan amount and currency values should be visually highlighted.
<!-- Product item with highlighted amounts -->
<bb-product-item-loan-ui
title="Featured Loan"
[amount]="75000.00"
currency="EUR"
[highlight]="true">
</bb-product-item-loan-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-loan-ui
title="Protected Loan"
[amount]="80000.00"
currency="EUR"
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes">
</bb-product-item-loan-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-loan-ui
title="Insured Loan"
[amount]="120000.00"
currency="EUR"
[moneyProtectionStatus]="MoneyProtectionStatusEnum.Yes"
moneyProtectionStatusClasses="bg-danger-subtle">
</bb-product-item-loan-ui>
productDetailsInfo
The productDetailsInfo input provides additional product information, such as loan owners, to be displayed below the main content.
<!-- Product item with product details -->
<bb-product-item-loan-ui
title="Joint Mortgage Loan"
[amount]="300000.00"
currency="EUR"
[productDetailsInfo]="{ owners: 'John & Jane Smith' }">
</bb-product-item-loan-ui>
productNumber
The productNumber input sets the loan number to be displayed, formatted according to productNumberFormat.
<!-- Product item with product number -->
<bb-product-item-loan-ui
title="Auto Loan"
[amount]="25000.00"
currency="EUR"
productNumber="NL75 INGB 3400 1200 56">
</bb-product-item-loan-ui>
productNumberFormat
The productNumberFormat input configures how the product number should be formatted and masked.
<!-- Product item with custom number formatting -->
<bb-product-item-loan-ui
title="Student Loan"
[amount]="40000.00"
currency="EUR"
productNumber="DE89 3704 0044 0532 0130 00"
[productNumberFormat]="{ length: 22, maskRange: [0, 0], segments: 6 }">
</bb-product-item-loan-ui>
title
The title input sets the loan name or title to be displayed as the main heading.
<!-- Product item with custom title -->
<bb-product-item-loan-ui
title="Small Business Development Loan"
[amount]="60000.00"
currency="EUR">
</bb-product-item-loan-ui>
Custom templates
The component supports custom templates for advanced customization:
- bbCustomProductItemLoanTitle: Custom template for the title area
- bbCustomProductItemLoanDetailsFormatter: Custom template for the loan amount display area
<!-- Product item with custom templates -->
<bb-product-item-loan-ui title="Custom Loan" [amount]="45000" currency="EUR">
<ng-template bbCustomProductItemLoanTitle>
<div class="custom-title">
<strong>{{ title }}</strong>
<div class="custom-subtitle">Fixed Rate Loan</div>
</div>
</ng-template>
<ng-template bbCustomProductItemLoanDetailsFormatter>
<div class="custom-amount">
<strong>Loan Amount:</strong>
<span class="highlight">€45,000.00</span>
<div class="loan-details">3.5% APR • 60 months</div>
</div>
</ng-template>
</bb-product-item-loan-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 loan numbers, amounts, and status information
- Semantic structure: Uses appropriate HTML elements and data attributes for loan information
- Visual hierarchy: Clear distinction between loan title and loan amount
- 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 loan amounts
The component automatically handles loan information display with appropriate visual styling and accessibility features, including proper semantic markup for financial information and loan-specific data presentation.