How to Implement AES Encrypt and Decrypt Data in Angular 8

How to Implement AES Encrypt and Decrypt Data in Angular 8

In this article, You’ll learn how to implement AES encryption and decryption in Angular 8 while developing an application.

Introduction

In this article, You’ll learn how to implement AES encryption and decryption in Angular 8 while developing an application.

Concepts

The AES is the advanced encryption standard. So, these algorithms have been the standard of encryption for organizations like the NSA and anyone else that wants to hide their data. So, it’s a critical part of the computer science curriculum. that you should understand if you’re a software developer.

Actually, DES and AES were both developed to solve the same problem in 1971. this algorithm was invented by two Belgian cryptographers, Vincent Rijmen and Joan Daemen. IBM was the inventor of this algorithm called DES. it gradually became insecure and crackable as computer software or as computer hardware.

In the late 1990s, the government the NSA, in particular, decided that they needed to have an improved algorithm. so they put open a worldwide search and took ideas from fifteen different groups. then they create something that has been a standard for now over 20 years so these algorithms are known as symmetric ciphers.

You would have a single password or key that would encrypt your document and then that same key is going to unlock the document. so that key is important the alternative to symmetric encryption is called asymmetric encryption.

When to use AES Encryption

1. If you want to encrypt confidential data into a decryptable format, for example – if you need to send some sensitive data via e-mail.

2. The decryption of the encrypted data is possible only when you know the right password.

Now, It is very easy to implement the AES encryption and decryption in Angular 8 with the help of crypto-js.

Let’s, create a new project with the below command.

ng new EncryptionDescryptionSample

After that, we need to install a crypto.js file, by the below command.

npm install crypto-js --save  

For better responsive UI, we also install bootstrap by the below command.

npm install bootstrap --save  

Now, Let’s go an open “app.component.html” file and replace the existing code with the following 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>

After that, open “app.component.ts” file and write the following code, we used the Encrypt method of AES and passed our plain text with a password to encrypt the string. then Similarly, we used the Decrypt method of AES and passed our encrypted text with a password to decrypt the string. Be assured that both times, your password we’ll be the same. so, using both of these methods, you just need to import “CryptoJS” from crypto-js libraries.

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);  

    }  
  }  
}  

Now, Run the project by using the below command.

ng serve --o

Here is the output.

This is image title

I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others. Thank you !

Angular Angular8 AES Cryptojs angular

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica

Angular Workspace: No Application for You!

The how and why of using the --create-application flag with Angular CLI to create a Workspace without the initial application A nice addition to Angular CLI 7.0.0 was the --create-application flag. In this article I will discuss how and when to use this new feature. It will be especially useful when creating Angular libraries. NOTE: Angular CLI accepts both camelCase and kebab-case for this option. So, anywhere you see --create-application, you can also use --createApplication. For more detail

How to Build an Angular Application with Angular CLI

How to set up the Angular CLI and generate a Trivial App

Angular Platforms in depth. Part 1. What are Angular Platforms?

The Angular framework was designed to be a platform independent. That approach allows Angular applications to be executed across different environments — browser, server, web-worker, and even mobile devices. In this series of articles, I’m going to reveal to you how does it even possible — execute Angular applications across different environments. Also, we’ll learn how to build custom Angular platform which renders applications inside the system’s terminal using ASCII graphics. Articles: *