ngx-numeric-captcha

July 31, 2025 · View on GitHub

🔐 A modern, lightweight Angular CAPTCHA library featuring multiple verification challenges. Perfect for securing login forms, registration pages, and any application requiring human verification.

npm version License: MIT Angular

✨ Features

  • 🧮 Math CAPTCHA - Arithmetic challenges with dynamic difficulty
  • 🎚️ Slider CAPTCHA - Interactive position matching
  • 🔢 Pattern CAPTCHA - Memory-based sequence challenges
  • 📱 Fully Responsive - Optimized for all screen sizes
  • 🎨 Customizable Sizes - Small & medium size variants
  • ⚡ Zero Dependencies - Self-contained with inline SVG icons
  • 🔧 TypeScript First - Complete type definitions included
  • 🔄 Smart Refresh - Automatic and manual challenge regeneration
  • ⌨️ Keyboard Friendly - Enter key support and accessibility features
  • 🎯 Compact Design - Minimal footprint for tight layouts

📦 Installation

🚀 Quick Start

1. Import the Module

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { NgxNumericCaptchaModule } from 'ngx-numeric-captcha';

@NgModule({ declarations: [AppComponent], imports: [ BrowserModule, FormsModule, // Required for form controls NgxNumericCaptchaModule ], bootstrap: [AppComponent] }) export class AppModule { }

2. Basic Usage

3. Handle Results

isCaptchaVerified = false; CaptchaType = CaptchaType;

onCaptchaResult(result: CaptchaResult) { this.isCaptchaVerified = result.isValid; }

4. Results validation

if (result.isValid) { console.log('✅ CAPTCHA verified successfully!'); } else { console.log('❌ Verification failed. Attempts:', result.attempts); }

📚 API Documentation

Component Selector

Properties

Input Properties

PropertyTypeDefaultDescription
typeCaptchaType'math'The type of CAPTCHA challenge
size'small' | 'medium''small'Component size variant

Output Events

EventTypeDescription
captchaResultCaptchaResultFired when user attempts verification

TypeScript Interfaces

enum CaptchaType { MATH = 'math', SLIDER = 'slider', PATTERN = 'pattern' }

interface CaptchaResult { isValid: boolean; // Whether verification was successful attempts: number; // Number of attempts made }

🎯 CAPTCHA Types

Math CAPTCHA

Simple arithmetic challenges perfect for quick verification.

<ngx-numeric-captcha type="math" 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

Slider CAPTCHA

Interactive position matching for engaging user experience.

<ngx-numeric-captcha type="slider" size="medium" (captchaResult)="handleSlider($event)">

Features:

  • Visual target indicator
  • Configurable tolerance zone
  • Smooth drag interaction
  • Mobile-friendly touch support

Pattern CAPTCHA

Memory-based sequence challenges for enhanced security.

<ngx-numeric-captcha type="pattern" size="small" (captchaResult)="handlePattern($event)">

Features:

  • 3-number sequence challenges
  • Visual sequence display
  • Grid-based input interface
  • Clear/reset functionality

💡 Real-World Examples

Login Form Integration

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); } } }

Registration Form

Complete Registration

Please verify you're human to continue

<lib-compact-captcha type="slider" size="medium" (captchaResult)="onVerification($event)">

Comment Form

<button 
  [disabled]="!isCaptchaVerified || !comment.trim()"
  (click)="submitComment()">
  Post Comment
</button>

🎨 Customization

CSS Custom Properties

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; }

Responsive

📱 Responsive Behavior The component automatically adjusts for different screen sizes:

Desktop: Full feature set with hover effects

Tablet: Touch-optimized interactions

Mobile: Compact layout with larger touch targets

♿ Accessibility ARIA labels for screen readers

Keyboard navigation support

High contrast compatible

Focus indicators for all interactive elements

Alternative text for visual elements

🌐 Browser Support Browser Version Chrome 90+ Firefox 88+ Safari 14+ Edge 90+ iOS Safari 14+ Chrome Mobile 90+

📈 Performance Bundle size: ~15KB (minified + gzipped)

Runtime overhead: Minimal

Memory usage: <1MB typical

Zero external dependencies

🔄 Version Compatibility ngx-numeric-captcha Angular Node.js 1.x 17+ 18+