Angular-iban

Angular directives and pipes for IBAN

Demo: https://fundsaccess.github.io/angular-iban/

Version compatibility

This library supports Angular 7+. Please check the Version compatibility below to choose the correct version to install.

| angular-iban | Angular |
|:------------:|:-------:|
| 0.2.0 | 7.x |
| 1.x | 8.x |
| 2.x | 9.x |
| 3.x | 10.x |
| 4.x | 11.x |
| 5.x | 12.x |
| 6.x | 13.x |
| 14.x | 14.x |
| 15.x | 15.x |
| 16.x | 16.x |
| 17.x | 17.x |
| 18.x | 18.x |
| 19.x | 19.x |
| 20.x | 20.x |

Installation

npm:
``

shell

npm install --save angular-iban iban





yarn:

shell

yarn add angular-iban iban







Import



Once installed you need to import the main module:

typescript

import { AngularIbanModule } from 'angular-iban';

import { NgModule } from '@angular/core';



@NgModule({

  declarations: [],

  imports: [AngularIbanModule], 

})

export class Module {

}





Usage



$3

https://www.iban-bic.com/sample_accounts.html



$3

typescript

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AngularIbanModule } from 'angular-iban';

import { ReactiveFormsModule } from '@angular/forms';



@NgModule({

  declarations: [],

 imports: [

     BrowserModule,

     AngularIbanModule,

     ReactiveFormsModule,

   ],

})

export class Module {

}

html



  

    IBAN: 

    

  



         class="alert alert-danger">



    

      IBAN is required.

    

    

      IBAN is invalid

    



  

         class="alert alert-danger">

    IBAN is valid.

typescript

import { Component } from '@angular/core';

import { FormControl, FormGroup, Validators } from '@angular/forms';

import { ValidatorService } from 'angular-iban';



@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

})



export class AppComponent {

  public reactiveForm = new FormGroup({

    ibanReactive: new FormControl(

      null,

      [

        Validators.required,

        ValidatorService.validateIban,

      ],

    ),

  });

}

$3

typescript

import { BrowserModule } from '@angular/platform-browser';

import { AngularIbanModule } from 'angular-iban';

import { FormsModule } from '@angular/forms';

import { NgModule } from '@angular/core';



@NgModule({

  declarations: [],

 imports: [

     BrowserModule,

     AngularIbanModule,

     FormsModule

   ],

})

export class Module {

}

html



    

      IBAN:

      

                 class="alert alert-danger">



        

          IBAN is required.

        

        

          IBAN is invalid

        



      

                 class="alert alert-danger">

        IBAN is valid.

$3

html

before

DE12500105170648489890



set pipe

{{ibanGermany | ibanFormatter}}



after

DE12 5001 0517 0648 4898 90





Demo



https://fundsaccess.github.io/angular-iban/



or



Run

ng serve for a dev server. Navigate to http://localhost:4200/`.

License