Angular 19+ Standalone Component for CapJS Widget
npm install @espressotutorialsgmbh/cap-angular-widgetAn Angular 19+ Standalone Component wrapper for CapJS – a privacy-friendly CAPTCHA alternative.
- ✅ Angular standalone component
- ✅ Reactive Forms support (formControlName)
- ✅ Event handling (solve, error, progress, reset)
- ✅ Light & Dark mode support
- ✅ Custom styling via CSS
---
``bash`
npm install cap-angular-widget
Optional (falls nicht automatisch installiert):
`bash`
npm install @cap.js/widget
---
`ts
import { CapjsWidgetComponent } from 'cap-angular-widget';
@Component({
standalone: true,
imports: [CapjsWidgetComponent, ReactiveFormsModule],
template:
})
export class MyPageComponent {
form = this.fb.group({ captcha: [''] }); constructor(private fb: FormBuilder) {}
onSolve(token: string) {
console.log('CAP solved:', token);
}
}
---
🎨 Themes
The component supports both
and dark themes via [theme] input.You can also apply your own styles using
::ng-deep or global styles:`css
cap-widget.dark {
--cap-background: #111;
--cap-color: white;
}
`---
🧪 Events
| Event | Description |
|-----------|--------------------------|
|
| Emits the solved token |
| error | Emits error message |
| progress| Emits numeric progress |
| reset | Emits when reset happens |---
🛠 Inputs
| Input | Type | Description |
|---------------|----------|---------------------------------------|
|
endpoint | string | Required. API endpoint |
| theme | string | 'light' (default) or 'dark' |
| workerCount | number | Optional worker count |
| i18n* | string | Internationalization labels |
| customFetch | func | Optional override for fetch |
| customWaspUrl | string` | Override the WASM URL |---
MIT