Angular

For Angular, there is a different package for each major version. All packages supply the eu-captcha component with the same inputs and outputs.

Requirements

The following requirements must be met:

Requirement	Value
Angular	Version 19, 20, or 21
Sitekey	Public sitekey from the Details view
Server side	Endpoint that verifies the token

Select the package

Select the package for the major version of your project:

Package	Angular
@myrasec/eu-captcha-angular19	Version 19
@myrasec/eu-captcha-angular20	Version 20
@myrasec/eu-captcha-angular21	Version 21

Install the selected package. The example shows Angular 21:

npm i @myrasec/eu-captcha-angular21

Embed the component

In a standalone component, embed EuCaptchaComponent:

import { Component } from '@angular/core';
import { EuCaptchaComponent, isEuCaptchaDone } from '@myrasec/eu-captcha-angular21';

@Component({
  standalone: true,
  imports: [EuCaptchaComponent],
  template: `
    <form (submit)="handleSubmit($event)">
      <!-- your fields -->
      <eu-captcha sitekey="EUCAPTCHA_SITE_KEY" />
      <button type="submit">Submit</button>
    </form>
  `,
})
export class MyFormComponent {
  handleSubmit(event: Event): void {
    event.preventDefault();
    if (!isEuCaptchaDone()) {
      // challenge not yet complete
      return;
    }
    // proceed with form submission
  }
}

In an application with modules, embed EuCaptchaModule instead:

import { NgModule } from '@angular/core';
import { EuCaptchaModule } from '@myrasec/eu-captcha-angular21';

@NgModule({
  imports: [EuCaptchaModule],
})
export class AppModule {}

<!-- in your template -->
<eu-captcha sitekey="EUCAPTCHA_SITE_KEY" />

Note

You can test the embedding with an invented sitekey. For an unknown sitekey, the CAPTCHA operates with the default values, and all traffic goes through.

Inputs

These inputs are available:

Input	Type	Default	Effect
sitekey	string	—	Public sitekey. The value is necessary.
theme	string	"light"	Appearance, values "light" and "dark".
width	number	330	Width of the widget in pixels.
height	number	100	Height of the widget in pixels.
widgetId	string	—	Your own identifier of the widget. Without a value, the package makes an identifier. For euCaptcha.execute(), the value is necessary.
autostart	boolean	true	Starts the challenge when the component is mounted. The false value delays the start until the euCaptcha.execute(widgetId) call.

Outputs

These outputs are available:

Output	Value	Effect
completed	string	Is triggered with the token as soon as the challenge passed.
expired	—	Is triggered when the token expires. A token expires 60 minutes after the solution.
error	—	Is triggered when a network error or a server error occurs.

Example of the evaluation:

<eu-captcha
  sitekey="EUCAPTCHA_SITE_KEY"
  (completed)="onToken($event)"
  (expired)="onExpired()"
  (error)="onError()"
/>

onToken(token: string): void {
  console.log('token:', token);
}

onExpired(): void {
  console.log('token expired');
}

onError(): void {
  console.log('challenge error');
}

Examples of the appearance:

<eu-captcha sitekey="EUCAPTCHA_SITE_KEY" theme="dark" />
<eu-captcha sitekey="EUCAPTCHA_SITE_KEY" [width]="280" />
<eu-captcha sitekey="EUCAPTCHA_SITE_KEY" [height]="60" />

Delay the start of the challenge

Set autostart to false and give an identifier:

<eu-captcha
  sitekey="EUCAPTCHA_SITE_KEY"
  widgetId="my-captcha"
  [autostart]="false"
/>

<button (click)="euCaptcha.execute('my-captcha')">Verify</button>

Get the condition

Before the transmission, examine if the challenge passed:

import { isEuCaptchaDone } from '@myrasec/eu-captcha-angular21';

function handleSubmit(): void {
    if (!isEuCaptchaDone()) {
        // challenge not yet complete
        return;
    }
    // proceed with form submission
}

As an alternative, wait for the euCaptchaDone message at the window:

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({ /* ... */ })
export class MyComponent implements OnInit, OnDestroy {
  private listener = (msg: MessageEvent) => {
    if (msg.data.type === 'euCaptchaDone') {
      // enable submit button, update state, etc.
    }
  };

  ngOnInit(): void {
    window.addEventListener('message', this.listener, false);
  }

  ngOnDestroy(): void {
    window.removeEventListener('message', this.listener, false);
  }
}

Warning

The verification in the browser controls only the operation. Always also verify the token on the server. See Verify a client token.

Full example

See Angular and Java.