Most of the time, a developer requires encryption and decryption for encoding a message or information in such a way that only authorized person can retrieve that information.
In this article, I will discuss the implementation of AES encryption and decryption with Angular 7 while developing an application.

So, the first question that comes in our mind is "What is AES?".
AES stands for "Advanced Encryption Standard".
It is a tool that is used to encrypt and decrypt the simple text using AES encryption algorithm.
This algorithm was developed by two Belgian cryptographers, Joan Daemen and Vincent Rijmen.
AES was designed to be efficient in both, hardware and software, and supports a block length of 128 bits and key lengths of 128, 192, and 256 bits.

When to use AES Encryption
When you want to encrypt a confidential text into a decryptable format, for example - when you need to send some sensitive data in an e-mail.
The decryption of the encrypted text is possible only if you know the right password.

Now, try to implement the AES encryption and decryption in Angular 7. It's very easy to implement in Angular 7 with the help of crypto-js.

First, we create a new project with the following command.
ng new EncryptionDescryptionSample 

After that, install crypto.js file, by the following command.
npm install crypto-js --save 

For better UI, we also install bootstrap by the following command.
npm install bootstrap --save 

After running the above command, check the package.json file if it is installed or not. Your file should look like this.
AES Encryption/Decryption with Angular 7

Now, go to "app.component.html" file and replace the existing code with the below code.
<h1 class="text-center">Encrypt-Decrypt with AES</h1> 
 
<br> 
<div> 
  <div class="row"> 
    <div class="col-sm-6"> 
      <button type="button" class="btn btn-primary btn-lg btn-block"> 
        Encryption 
      </button> 
      <br> 
      <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> 
 
      <div class="form-group"> 
        <label for="txtPassword">Password</label> 
        <input type="password" class="form-control" placeholder="Enter encryption password" [(ngModel)]="encPassword"> 
      </div> 
      <textarea class="form-control" readonly rows="3">{{conversionEncryptOutput}}</textarea> 
      <br> 
      <button type="button" class="btn btn-success float-right" (click)="convertText('encrypt')">Encrypt</button> 
    </div> 
    <div class="col-sm-6"> 
      <button type="button" class="btn btn-dark btn-lg btn-block"> 
        Decryption 
      </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> 
 
      <div class="form-group"> 
        <label for="txtPassword">Password</label> 
        <input type="password" class="form-control" placeholder="Enter decryption password" [(ngModel)]="decPassword"> 
      </div> 
      <textarea class="form-control" readonly rows="3">{{conversionDecryptOutput}}</textarea> 
      <br> 
      <button type="button" class="btn btn-success float-right" (click)="convertText('decrypt')">Decrypt</button> 
    </div> 
  </div> 
</div> 

Now, visit "app.component.ts" file and write the below 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 { 
  title = 'EncryptionDecryptionSample'; 
   
  plainText:string; 
  encryptText: string; 
  encPassword: string; 
  decPassword:string; 
  conversionEncryptOutput: string; 
  conversionDecryptOutput:string; 
   
  constructor() { 
  } 
  //method is used to encrypt and decrypt the text 
  convertText(conversion:string) { 
      if (conversion=="encrypt") { 
        this.conversionEncryptOutput = CryptoJS.AES.encrypt(this.plainText.trim(), this.encPassword.trim()).toString(); 
      } 
      else { 
        this.conversionDecryptOutput = CryptoJS.AES.decrypt(this.encryptText.trim(), this.decPassword.trim()).toString(CryptoJS.enc.Utf8); 
      
    } 
  } 
} 

In the above code, we used the Encrypt method of AES and passed our plain text with a password to encrypt the string. Similarly, we used the Decrypt method of AES and passed our encrypted text with a password to decrypt the string. Be sure that both times, your password is the same. For using both of these methods, you need to import "CryptoJS" from crypto-js.
import * as CryptoJS from 'crypto-js'; 

Now, let us run the project by using the following command.
ng serve --o 

HostForLIFE.eu AngularJS Hosting

HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.