Import
import { AccountNumberModule } from '@backbase/ui-ang/account-number'
Usage
Use the bb-account-number-ui component to display a formatted account number. The number input is required unless you provide an account object.
<!-- Basic account number usage with a number -->
<bb-account-number-ui [number]="'GB29NWBK60161331926819'"></bb-account-number-ui>
Masking
By default, masking and unmasking functionality is not implemented. To enable full masking capabilities, bind the mask and unmask outputs to functions that toggle between masked and unmasked states.
import { Component } from '@angular/core';
@Component({
selector: 'bb-account-number-ui-showcase',
template: `
<bb-account-number-ui
[number]="number"
[unmaskable]="true"
[masked]="masked"
(unmask)="onUnmask()"
(mask)="onMask()"
>
</bb-account-number-ui>
`
})
export class AccountNumberShowcaseComponent {
number = '1234';
masked = false;
onMask() {
this.number = '**34';
this.masked = true;
}
onUnmask() {
this.number = '1234';
this.masked = false;
}
}
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
account |
ArrangementItem |
{} |
|
masked |
boolean |
false |
|
number |
string | number |
undefined |
|
tooltipTrigger |
string |
'hover focus' |
|
type |
'cardNumber' | 'iban' | 'bban' |
undefined |
|
unmaskable |
boolean |
false |
account
Account that contains account number, a format will be picked automatically. Used when `number` unset
<!-- Account number using an arrangement object -->
<bb-account-number-ui
[account]="{ IBAN: 'DE89370400440532013000', productKindName: 'Current Account' }"
></bb-account-number-ui>
masked
Defines whether the attribute is masked.
<!-- Account number initially masked -->
<bb-account-number-ui
[masked]="true"
[number]="accountNumber"
[number]="'**6819'"
></bb-account-number-ui>
number
The number input sets the account number to display. If provided, it takes precedence over the account input. Use with type to specify which format to use
<!-- Account number with a direct number value -->
<bb-account-number-ui [number]="'NL91ABNA0417164300'" type="iban"></bb-account-number-ui>
tooltipTrigger
The tooltipTrigger input sets the trigger behavior for the tooltip on the mask/unmask buttons.
<!-- Account number with custom tooltip trigger -->
<bb-account-number-ui
[tooltipTrigger]="'click'"
[unmaskable]="true"
[number]="'NL91ABNA0417164300'">
</bb-account-number-ui>
type
The type input specifies the format to use for the account number.
<!-- Account number with explicit type formatting -->
<bb-account-number-ui
[type]="'iban'"
[number]="'NL91ABNA0417164300'">
</bb-account-number-ui>
unmaskable
The unmaskable input determines whether the account number can be masked or unmasked by the user.
<!-- Account number with mask/unmask buttons enabled -->
<bb-account-number-ui
[unmaskable]="true"
[number]="'NL91ABNA0417164300'">
</bb-account-number-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
mask |
EventEmitter<AccountNumberType> |
Emits when an AccountNumberType needs to be masked |
|
unmask |
EventEmitter<AccountNumberType> |
Emits when an AccountNumberType needs to be unmasked |