ng9-card
v0.0.2
Published
Angular 9 wrapper for card.js
Downloads
15
Readme
ng9-card 
Angular 9 wrapper for card.js
Based on ngx-card package.
Installation
Install through npm:
npm install --save ng9-cardDependencies
This library depends on https://github.com/jessepollak/card (tested with 2.3.0).
We don't ship with the library, but you have to take care of including it in your page. There are various ways to achieve this, for example by adding this at the end of your <body>:
<script src="https://unpkg.com/[email protected]/dist/card.js"></script>API
[card]
Input
container: any: A selector or DOM element for the form where users will be entering their information
card-width: number: default 350px
messages: any = {validDate: 'valid\ndate', monthYear: 'mm/yyyy'}: Strings for translation
placeholders: any = {number: '•••• •••• •••• ••••', name: 'Full Name', expiry: '••/••', cvc: '•••'}: Placeholders for rendered fields
masks: any;
formatting: boolean = true;
debug: boolean = false: If true, will log helpful messages for setting up Card
[card-number]
[card-name]
[card-expiry]
[card-cvc]
Usage
Once installed you need to import our main module into yours. You should end up with code similar to this:
import {MyComponent} from '...';
import {CardModule} from 'ng9-card';
@NgModule({
imports: [..., CardModule],
declarations: [MyComponent, ...],
})
export class MyModule {}Modify slightly your form by adding the correct directives in your form elements.
You can have multiple form elements that render to a single field (i.e. you have a first and last name input).
To use ngx-card with this functionality, just rearrange your form elements in the correct order and add the proper directives. For example,
<div class="card-container"></div>
<form card
container=".card-container"
card-width="500"
[messages]="messages"
[placeholders]="placeholders"
[masks]="masks"
formatting="false"
debug="true">
<input type="text" name="number" card-number/>
<input type="text" name="first-name" card-name/>
<input type="text" name="last-name" card-name/>
<input type="text" name="expiry" card-expiry/>
<input type="text" name="cvc" card-cvc/>
</form>MIT © Carlos Possa