Prerequisites
First, you should get your Captcha ID and Captcha Div ID
Please visit for more information:
Installation
Install captcha wrapper with npm:
npm i @leminnow/ng-lemin-cropped-captcha
Also, you can install captcha wrapper with yarn:
yarn add @leminnow/ng-lemin-cropped-captcha
Integration
Import LeminCroppedCaptchaModule:
import {LeminCroppedCaptchaModule} from "@leminnow/ng-lemin-cropped-captcha";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
LeminCroppedCaptchaModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Use LeminCroppedCaptcha in your component:
Lemin Captcha must be placed inside of a “form” element.
<form>
<div [id]="containerId"></div>
<lemin-cropped-captcha
containerId="..."
captchaId="CROPPED_..."
></lemin-cropped-captcha>
</form>
Please ensure that your captcha-div-id is the same as the captcha-div-id you’ve set before. If you set a captcha-div-id for your Lemin Captcha in the advanced settings, this div must have that same captcha-div-id. (default: “lemin-cropped-captcha”)
Usage Examples
Using with component ref:
<form>
<div [id]="containerId"></div>
<lemin-cropped-captcha
containerId="..."
captchaId="CROPPED_..."
></lemin-cropped-captcha>
</form>
<button (click)="getCaptchaValues()">Get Values</button>
import {LeminCroppedCaptchaComponent} from "@leminnow/ng-lemin-cropped-captcha";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(LeminCroppedCaptchaComponent) leminCroppedCaptcha!: LeminCroppedCaptchaComponent;
constructor() {
}
getCaptchaValues() {
const values = this.leminCroppedCaptcha.getCaptchaValue();
}
}
Using with LeminCroppedCaptchaService – Integrated:
<form>
<lemin-cropped-captcha
containerId="..."
captchaId="CROPPED_..."
></lemin-cropped-captcha>
</form>
<button (click)="getCaptchaValues()">Get Values</button>
import {LeminCroppedCaptchaService} from "@leminnow/ng-lemin-cropped-captcha";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private leminCroppedCaptchaService: LeminCroppedCaptchaService) {
}
getCaptchaValues() {
const values = this.leminCroppedCaptchaService.getCaptcha('...').getCaptchaValue()
}
}
Using with LeminCroppedCaptchaService – Boxed:
<form>
<lemin-cropped-captcha
containerId="..."
(onVerify)="verifyCallback($event)
captchaId="CROPPED_..."
></lemin-cropped-captcha>
</form>
<button (click)="getCaptchaValues()">Get Values</button>
import {LeminCroppedCaptchaService} from "@leminnow/ng-lemin-cropped-captcha";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private leminCroppedCaptchaService: LeminCroppedCaptchaService) {
}
getCaptchaValues() {
const values = this.leminCroppedCaptchaService.getCaptcha('...').getCaptchaValue()
}
verifyCallback(isVerified: boolean) {
console.log(isVerified)
}
}
Please, find below the example GitHub repository.