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