This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

ng2-iban
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

ng2-iban

Travis (.org) Coverage Status NPM GitHub code size in bytes

Angular 2+ module for IBAN (International bank account number) operations

Installation

npm:

npm install --save ng2-iban iban

Now you need to import Ng2IbanModule to your module

import { Ng2IbanModule } from 'ng2-iban';

@NgModule({
  declarations: [],
  imports: [Ng2IbanModule]
})
export class YourModule {
}

Usage

Ng2IbanModule provide two types of functionality. You can management with iban or provide bank information.

Iban operations

Iban is international bank account number which contains locale symbol, control sum or bank code. Locale characters are two first letters from iban. Next two are called as control sum. From 4 character to 8 we named bank code. For operations on that fields you can use:

  • pipe,
  • service,
  • validator.

Pipe

You can use pipe to convert iban into electronic format:

{{ 'SE3550000000054910000003' | ibanConverter }} // SE35 5000 0000 0549 1000 0003
Pipe default options
{
  locale: null,
  separator: ' ',
  formatWithLocale: true 
}

To override options pass it to pipe:

{{ 'SE3550000000054910000003' | ibanConverter:options }} // 35-5000-0000-0549-1000-0003
Pipe in components and services

You can inject pipe to angular 2+ component:

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  providers: [
    Ng2IbanPipe
  ]
})
export class YourComponent {
  private options = { 
    separator: '-'
  };
  
  constructor(private ng2IbanPipe: Ng2IbanPipe) {
    ng2IbanPipe.transform('SE3550000000054910000003', this.options);  // You can pass options as second parameter
  }
}

Service

Angular 2+ service provide methods that you can do with iban.

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private ng2IbanService: Ng2IbanService) {
    ng2IbanService.onCheckIban('3550000000054910000003', 'SE');
  }
}

Service API

Method Response Description
onCheckIban(iban: string, locale?: string) boolean Validate iban
onConvertToBban(iban: string, separator: string) string Convert iban to bban or throw when iban is incorrect
onConvertFromBban(locale: string, bban: string) string Convert bban to iban
onFormatIban(iban: string, separator: string) string Format iban

Validator

At the first you must inject module FormsModule

@NgModule({
  //...
  imports: [
    //...
    FormsModule
  ]
  //...
})
export class YourModule { }
Template driven

You can use directive for template driven

@Component({
    template: `<input type="text" ng2IbanValidation [(ngModel)]="iban">`,
    providers: [Ng2IbanDirective]
})
export class Component {
    public iban: string;
}

If you want to validate without locale:

@Component({
    template: `<input type="text" ng2IbanValidation ng2IbanLocale="SE" [(ngModel)]="iban">`,
    providers: [Ng2IbanDirective]
})
export class Component {
    public iban: string;
}
Reactive forms

Reactive forms validation

const formGroup = formBuilder.group({
  ibanWithLocale: new FormControl('SE3550000000054910000003', {
    validators: [
      Ng2IbanValidator.ValidatorIBAN
    ]
  }),
  ibanWithoutLocale: new FormControl('3550000000054910000003', {
    validators: [
      Ng2IbanValidator.ValidatorIBANWithLocale('SE')
    ]
  })
});

Bank account operations

This part of package focus on converting iban into list of information that you provide as json.

Module options

import { Ng2IbanModule } from 'ng2-iban';

@NgModule({
  declarations: [],
  imports: [Ng2IbanModule.forRoot({
    bankInformationConfig: {
      bankInformationPath: 'assets/my-bank-json.json',  // Path to bank code list
      bankInformationNotFound: 'Your bank code cannot be found' // Message returned when service cant find bank information
    }
  )
  ]
})
export class YourModule {
}

Bank information file

You need to create json file (default: assets/ng2-bank-information.json). Example:

[
  {
    "locale": "SE",
    "codes": [
      {
        "code": "5000",
        "information": {
          "img": "https://...",
          "title": "Your bank",
          "description": "Any custom informations",
          "customField": "You can add whatever you want"
        }
      }
    ]
  }
]

Bank information service

Angular 2+ service for getting bank information.

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  onGetLoadedBankInformationSubscription: Subscription;

  constructor(private ng2BankInformationService: Ng2BankInformationService) {
    this.onGetLoadedBankInformationSubscription = this.ng2BankInformationService
      .onGetLoadedBankInformationSubject.subscribe(() => {
          let bankInformation = this.ng2BankInformationService.onGetBankInformation('SE3550000000054910000003');
        }
      );
  }
}

Bank information pipe

{{ 'SE3550000000054910000003' | bankInformation }} // return property title from json

If you want override options:

{{ 'SE3550000000054910000003' | bankInformation:{locale: null, property: 'title'}}

License

The MIT License

Package Sidebar

Install

npm i ng2-iban

Weekly Downloads

24

Version

1.0.2

License

MIT

Unpacked Size

172 kB

Total Files

38

Last publish

Collaborators

  • tomaszwpasternak