
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Angular 2+ wrapper for card.js
https://ihym.github.io/ngx-card/
Install through npm
:
npm install --save ngx-card
If you use SystemJS to load your files, you should adjust your configuration to point our UMD bundle:
map: {
...
'ngx-card/ngx-card': 'node_modules/ngx-card/bundles/ngx-card.umd.js'
}
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/card@2.3.0/dist/card.js"></script>
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
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 'ngx-card/ngx-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,
<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>
npm run build
If you want to watch your source files for changes and build every time use:
npm start
Note: Generated output is placed into the node_modules/ngx-card
folder.
The best way to see your changes in action, is to use our demo page locally. Run:
npm run demo
which will create a development server accessible through http:localhost:1111
.
In conjunction with npm start
in another command tab you have a fully working environment!
All demo resources can be found in the /demo
folder.
MIT © Vasilis Diakomanolis
0.2.4 (2017-08-22)
<a name="0.2.3"></a>
FAQs
Angular 2+ wrapper for card.js
The npm package ngx-card receives a total of 601 weekly downloads. As such, ngx-card popularity was classified as not popular.
We found that ngx-card demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.