Research
Security News
Kill Switch Hidden in npm Packages Typosquatting Chalk and Chokidar
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
angular-cc-library
Advanced tools
https://timofei-iatsenko.github.io/angular-cc-library/
Or run locally:
yarn install
yarn run:demo
http://localhost:4200
npm install angular-cc-library --save
Angular | Library |
---|---|
18.x | 3.4.x |
17.x | 3.3.x |
16.x | 3.2.x |
15.x | 3.1.x |
14.x | 3.0.4 |
13.x | 3.0.0 |
12.x | 2.1.3 |
On the input fields, add the specific directive to format inputs.
All fields must be type='tel'
in order to support spacing and additional characters.
Since angular-cc-library@3.3.0
all directives declared as standalone,
so you can import them directly into your component:
import { Component } from '@angular/core';
import { CreditCardFormatDirective } from 'angular-cc-library';
@Component({
selector: 'credit-card-number-input',
standalone: true,
deps: [CreditCardFormatDirective],
template: `<input id="cc-number" type="tel" autocomplete="cc-number" ccNumber>`
})
export class CreditCardNumberInputComponent {}
But you can still import them all at once using CreditCardDirectivesModule
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CreditCardDirectivesModule } from 'angular-cc-library';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, FormsModule, CreditCardDirectivesModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
Credit Card Formatter
ccNumber
directive:<input id="cc-number" type="tel" autocomplete="cc-number" ccNumber>
this will also apply a class name based off the card .visa
, .amex
, etc. See the array of card types in credit-card.ts
for all available types
You can get parsed card type by using export api:
<input type="tel" ccNumber #ccNumber="ccNumber">
<span class="scheme">{{ccNumber.resolvedScheme$ | async}}</span>
resolvedScheme$
will be populated with visa
, amex
, etc.
Expiration Date Formatter Will support format of MM/YY or MM/YYYY
ccExp
directive:<input id="cc-exp-date" type="tel" autocomplete="cc-exp" ccExp>
CVC Formater
ccCvc
directive:<input id="cc-cvc" type="tel" autocomplete="off" ccCVC>
Current only Model Validation is supported. To implement, import the validator library and apply the specific validator on each form control
import { CreditCardValidators } from 'angular-cc-library';
@Component({
selector: 'app',
template: `
<form #demoForm="ngForm" (ngSubmit)="onSubmit(demoForm)" novalidate>
<input id="cc-number" formControlName="creditCard" type="tel" autocomplete="cc-number" ccNumber>
<input id="cc-exp-date" formControlName="expirationDate" type="tel" autocomplete="cc-exp" ccExp>
<input id="cc-cvc" formControlName="cvc" type="tel" autocomplete="off" ccCvc>
</form>
`
})
export class AppComponent implements OnInit {
form: FormGroup;
submitted: boolean = false;
constructor(private _fb: FormBuilder) {}
ngOnInit() {
this.form = this._fb.group({
creditCard: ['', [CreditCardValidators.validateCCNumber]],
expirationDate: ['', [CreditCardValidators.validateExpDate]],
cvc: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(4)]]
});
}
onSubmit(form) {
this.submitted = true;
console.log(form);
}
}
Based on Stripe's jquery.payment plugin but adapted for use by Angular
MIT
FAQs
angular credit card library
The npm package angular-cc-library receives a total of 4,625 weekly downloads. As such, angular-cc-library popularity was classified as popular.
We found that angular-cc-library demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.