Change reCaptcha language dynamically in Angular

This article is the continuation of an article I wrote on reCaptcha.

There I used ng-recaptcha library to setup recaptcha. This libraray is great, but the issue with it is that, the reCaptcha language change does not work all the time.

Recently I found reCaptcha support is present in Primeng library.

PrimeNg makes it very simple to setup reCaptcha.

Steps to setup reCaptcha using PrimeNg

1. Install primeNg using below commands,

   npm install primeng --save
   npm install primeicons --save
   

2. Add below style in angular.json as below,

   "styles": [
       "node_modules/primeicons/primeicons.css",
       "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
       "node_modules/primeng/resources/primeng.min.css",
       ...
   ]
   

3. Once primeNg is installed we need can add reCaptcha,

   1. Import below module in your component.ts file

      import {CaptchaModule} from 'primeng/captcha';
      

   2. Add reCaptcha tag in your component html file

      <p-captcha siteKey="YOUR_SITE_KEY" (onResponse)="showResponse($event)"></p-captcha>
      

   3. Add below script in index.html file

      <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=initRecaptcha" async defer></script>
      

   4. The generated reCaptcha code will be available in showResponse method. This code needs to sent to your backend API to complete the recaptcha security.

   5. We can change language easily by using language attribute as shown below,

      <p-captcha siteKey="YOUR_SITE_KEY" language="en" (onResponse)="showResponse($event)"></p-captcha>
      

   That’s it!. That’s how easy it is to setup reCaptcha using PrimeNg

   For more information on PrimeNg reCaptcha refer documentation at http://primefaces.org/primeng/captcha