Angular 14 ngx-captcha Example to Add Google reCAPTCHA Widget in Website Using TypeScript

Welcome folks today in this blog post we will be using the ngx-captcha library to add Google reCAPTCHA widget in website using typescript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new angular project using the below command

ng new sampleapp

cd sampleapp

And after that you need to install the below library using the npm command as shown below

npm i ngx-captcha

And after that you will see the below directory structure of the angular app as shown below

And now you need to go to app.module.ts file and copy paste the following code

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgxCaptchaModule } from 'ngx-captcha';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, NgxCaptchaModule, ReactiveFormsModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { NgxCaptchaModule } from 'ngx-captcha';

import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({

imports: [ BrowserModule, FormsModule, NgxCaptchaModule, ReactiveFormsModule],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

As you can see we are importing the ngx-captcha library and then adding the captcha module inside the imports array as shown above.

Now you need to go to app.component.html file and copy paste the following code

app.component.html

<form [formGroup]="aFormGroup">
	<ngx-recaptcha2 #captchaElem siteKey="##replaceyoursitekey##" (success)="handleSuccess($event)" [size]="size"
	 [hl]="lang" [theme]="theme" [type]="type" formControlName="recaptcha">
	</ngx-recaptcha2>
</form>

<ngx-recaptcha2 #captchaElem siteKey="##replaceyoursitekey##" (success)="handleSuccess($event)" [size]="size"

[hl]="lang" [theme]="theme" [type]="type" formControlName="recaptcha">

</ngx-recaptcha2>

</form>

As you can see we have the captcha widget that we are displaying inside the simple html5 form and here you need to replace your site key that you will get inside the google recaptcha dashboard as shown below

And now you need to go to app.component.ts file and copy paste the following code

app.component.ts

import { Component, OnInit,ElementRef, ViewChild} from '@angular/core';
import { FormGroup, FormBuilder, Validators} from '@angular/forms';
import { ReCaptcha2Component } from 'ngx-captcha';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
// to use captch in angular you have to install ngx-captcha packahe
// documentation https://www.npmjs.com/package/ngx-captcha
export class AppComponent implements OnInit  {
 protected aFormGroup: FormGroup;
 @ViewChild('captchaElem') captchaElem: ReCaptcha2Component;
  @ViewChild('langInput') langInput: ElementRef;

  public captchaIsLoaded = false;
  public captchaSuccess = false;
  public captchaIsExpired = false;
  public captchaResponse?: string;

  public theme: 'light' | 'dark' = 'light';
  public size: 'compact' | 'normal' = 'normal';
  public lang = 'en';
  public type: 'image' | 'audio';
 
  constructor(private formBuilder: FormBuilder) {}
 
  ngOnInit() {
    this.aFormGroup = this.formBuilder.group({
      recaptcha: ['', Validators.required]
    });
  }
  // reset(): void {
  //   this.captchaElem.resetCaptcha();
  // }
  handleSuccess(data) {
    console.log(data);
  }
}

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

import { FormGroup, FormBuilder, Validators} from '@angular/forms';

import { ReCaptcha2Component } from 'ngx-captcha';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

// to use captch in angular you have to install ngx-captcha packahe

// documentation https://www.npmjs.com/package/ngx-captcha

export class AppComponent implements OnInit {

protected aFormGroup: FormGroup;

@ViewChild('captchaElem') captchaElem: ReCaptcha2Component;

@ViewChild('langInput') langInput: ElementRef;

public captchaIsLoaded = false;

public captchaSuccess = false;

public captchaIsExpired = false;

public captchaResponse?: string;

public theme: 'light' | 'dark' = 'light';

public size: 'compact' | 'normal' = 'normal';

public lang = 'en';

public type: 'image' | 'audio';

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {

this.aFormGroup = this.formBuilder.group({

recaptcha: ['', Validators.required]

});

}

// reset(): void {

// this.captchaElem.resetCaptcha();

// }

handleSuccess(data) {

console.log(data);

}

As you can see we are importing the ngx-captcha library and then we can have image and audio captcha’s as well. And also we are also attaching the recaptcha validators inside the ngOnInit() method.