Skip to content

Angular Integration

Procaptcha provides an official Angular component for easy integration of Prosopo Procaptcha into any Angular project. The integration component supports all the Procaptcha render options.

1. Installation

npm install @prosopo/angular-procaptcha-wrapper

2. Example of usage

2.1) Basic setup

import { Component } from "@angular/core";
import {
    ProcaptchaComponent,
    type ProcaptchaRenderOptions,
} from "@prosopo/angular-procaptcha-wrapper";

@Component({
    selector: "app-root",
    imports: [ProcaptchaComponent],
    template: `
    <procaptcha-component [settings]="procaptchaSettings"
                          [htmlAttributes]="{class:'my-app__procaptcha'}"/>`,
    styles: "",
})
export class AppComponent {
    procaptchaSettings: ProcaptchaRenderOptions = {
        siteKey: "your-site-key",
    };
}

2.2) Advanced usage

// ...

export class AppComponent {
    procaptchaSettings: ProcaptchaRenderOptions = {
        siteKey: environment.PROCAPTCHA_SITE_KEY,
        language: "en",
        callback: (token: string) => {
            console.log("verified", token);
        },
    };
}