How to Implement on Angular

Prerequisites

First, you should get your Captcha ID and  Captcha Div ID
Please visit for more information: Displaying Lemin CAPTCHA

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. 

https://github.com/lemin-now/lemin_captcha_angular_example