A lightweight Angular CAPTCHA library with Math, Slider, and Pattern verification types. Compact design perfect for login forms and secure applications.
npm install ngx-numeric-captchats
import { Component } from '@angular/core';
import { CaptchaResult, CaptchaType, NumericCaptchaComponent } from 'ngx-numeric-captcha';
@Component({
selector: 'app-root',
imports: [NumericCaptchaComponent],
templateUrl: './app.html',
styleUrl: './app.scss'
})
export class App {
isCaptchaVerified = false;
CaptchaType = CaptchaType;
onCaptchaResult(result: CaptchaResult) {
this.isCaptchaVerified = result.isValid;
}
}
`
$3
`html
size="medium"
(captchaResult)="onCaptchaResult($event)">
`
$3
`ts
isCaptchaVerified = false;
CaptchaType = CaptchaType;
onCaptchaResult(result: CaptchaResult) {
this.isCaptchaVerified = result.isValid;
}
`
$3
`ts
if (result.isValid) {
console.log('ā
CAPTCHA verified successfully!');
} else {
console.log('ā Verification failed. Attempts:', result.attempts);
}
`
š API Documentation
$3
$3
$3
| Property | Type | Default | Description |
|----------|-------------|---------|-------------------------------|
| type | CaptchaType | 'math'| The type of CAPTCHA challenge |
| size | 'small' \| 'medium' | 'small' | Component size variant |
$3
| Event | Type | Description |
|-------|------|-------------|
| captchaResult | CaptchaResult | Fired when user attempts verification |
$3
`ts
enum CaptchaType {
MATH = 'math',
SLIDER = 'slider',
PATTERN = 'pattern'
}
interface CaptchaResult {
isValid: boolean; // Whether verification was successful
attempts: number; // Number of attempts made
}
`
šÆ CAPTCHA Types
$3
Simple arithmetic challenges perfect for quick verification.
`html
size="small"
(captchaResult)="handleMath($event)">
`
Features:
- Addition, subtraction, and multiplication
- Numbers optimized for compact display (1-15)
- Enter key submission support
- Auto-generates new problems on failure
$3
Interactive position matching for engaging user experience.
`html
size="medium"
(captchaResult)="handleSlider($event)">
`
Features:
- Visual target indicator
- Configurable tolerance zone
- Smooth drag interaction
- Mobile-friendly touch support
$3
Memory-based sequence challenges for enhanced security.
`html
size="small"
(captchaResult)="handlePattern($event)">
`
Features:
- 3-number sequence challenges
- Visual sequence display
- Grid-based input interface
- Clear/reset functionality
š” Real-World Examples
$3
`html
`
`ts
export class LoginComponent {
email = '';
password = '';
isCaptchaVerified = false;
onCaptchaResult(result: CaptchaResult) {
this.isCaptchaVerified = result.isValid;
if (!result.isValid && result.attempts >= 3) {
// Handle max attempts reached
console.warn('Max verification attempts reached');
}
}
onLogin() {
if (this.isCaptchaVerified) {
// Proceed with secure login
this.authService.login(this.email, this.password);
}
}
}
`
$3
`html
Complete Registration
Please verify you're human to continue
size="medium"
(captchaResult)="onVerification($event)">
`
$3
`html
`
$3
$3
`css
ngx-numeric-captcha {
--captcha-primary-color: #4CAF50;
--captcha-secondary-color: #2196F3;
--captcha-error-color: #F44336;
--captcha-border-radius: 8px;
--captcha-font-family: 'Inter', sans-serif;
}
``
[(ngModel)]="comment"
placeholder="Write your comment..."
rows="3">
size="small"
(captchaResult)="onCaptchaVerified($event)">
[disabled]="!isCaptchaVerified || !comment.trim()"
(click)="submitComment()">
Post Comment