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
The masking feature requires a custom implementation. For masking to work, the mask and unmask outputs should be mapped to functions that handle the toggling between the masked and unmasked number.
@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;
}
constructor() {}
}
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
The account input accepts an arrangement object containing IBAN, BBAN, and number fields. If number is not set, the component will use the account object to determine which number to display.
<!-- Account number using an arrangement object -->
<bb-account-number-ui
[account]="{ IBAN: 'NL91ABNA0417164300', BBAN: '0417164300', number: '12345678' }"
></bb-account-number-ui>
masked
The masked input determines whether the account number is currently 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.
<!-- 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 |