AES Encryption/Decryption With Angular 13

In this article, I’ll go through how to use Angular 13 to implement AES encryption and decryption when constructing an application.

 What is AES?

• AES stands for “Advanced Encryption Standard”.
• It’s a programme that uses the AES encryption technique to encrypt and decode basic text.

When Should AES Encryption Be Used?

• When you need to encrypt a secret text into a decryptable format, such as when sending sensitive information over e-mail.
• The encrypted content can only be decrypted if you have the correct password.

Now attempt to use Angular 13 to build AES encryption and decoding. With the aid of crypto-js, it’s quite simple to build in Angular 13.

To begin, use the following command to establish a new project.

ng new EncryptionDescryption

After that, use the following command to install the crypto.js file.

npm install crypto-js --save

We also run the following command to install bootstrap for better UI.

npm install bootstrap --save

Replace the existing code in the “app.component.html” file with the following code.

<section>
  <h1 class="text-center">Encrypt-Decrypt with AES</h1>  
  <br>  
  <div class="row">  
    <div class="col-6">  
      <button type="button" class="btn btn-secondary btn_set mb-3">  
       Encryption Form 
      </button>  
      <div class="form-group">  
        <label for="txtTextToConvert">Plain Text</label>  
        <input type="text" class="form-control" placeholder="Enter text you want to encrypt" [(ngModel)]="plainText">  
      </div>  
      <br>
      <div class="form-group mb-2">  
        <label for="txtPassword">Password</label>  
        <input type="password" class="form-control" placeholder="Enter encryption password" [(ngModel)]="enPassword">  
      </div>  
      <textarea class="form-control" readonly rows="3">{{encryptOutput}}</textarea>  
      <br>  
      <button type="button" class="btn btn-primary sub_btn" (click)="convertText('encrypt')">Encrypt</button>  
    </div>  

    <div class="col-6">  
      <button type="button" class="btn btn-dark btn_set mb-3">  
        Decryption  Form
      </button>  
      <br>  
      <div class="form-group">  
        <label for="txtTextToConvert">Encrypted Text</label>  
        <input type="text" class="form-control" placeholder="Enter text you want to decrypt" [(ngModel)]="encryptText">  
      </div>  
      <br>
      <div class="form-group mb-2">  
        <label for="txtPassword">Password</label>  
        <input type="password" class="form-control" placeholder="Enter decryption password" [(ngModel)]="dePassword">  
      </div>  
      <textarea class="form-control" readonly rows="3">{{decryptOutput}}</textarea>  
      <br>  
      <button type="button" class="btn btn-primary sub_btn" (click)="convertText('decrypt')">Decrypt</button>  
    </div>  
  </div>  
</section>

Now go to the “app.component.ts” file and add the following code.

import { Component } from '@angular/core';
import * as CryptoJS from 'crypto-js';  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  plainText!: string;  
  encryptText!: string;  
  enPassword!: string;  
  dePassword!: string;  
  encryptOutput!: string;  
  decryptOutput!: string;  
    
  constructor() {  
  }  
  convertText(conversion:string) {  
      if (conversion=="encrypt") {  
        this.encryptOutput = CryptoJS.AES.encrypt(this.plainText.trim(), this.enPassword.trim()).toString();  
      }  
      else {  
        this.decryptOutput = CryptoJS.AES.decrypt(this.encryptText.trim(), this.dePassword.trim()).toString(CryptoJS.enc.Utf8);  
       
    }  
  }  
}  

To encrypt the string, we used the AES Encrypt method and gave our plain text along with a password. To decode the string, we utilised the AES Decrypt function and submitted our encrypted text with a password. Make sure your password is the same both times. You’ll need to import “CryptoJS” from crypto-js to use both of these techniques.

import * as CryptoJS from 'crypto-js';

Let’s now run the project with the following command.

ng serve -o

Output