DEV Community

Anil Singh
Anil Singh

Posted on Edited on

Angular 17 Encrypting Decrypting Data with CryptoJs | Angular 17 Tutorial | React

Step 1:

First, let's install crypto-js in our Angular project using npm:

npm install crypto-js
npm i --save-dev @types/crypto-js

Step 2:

Once crypto-js is installed, we can import it into our Local Service (EncrDecrService):

import * as CryptoJS from 'crypto-js';

Step 3:

Now we will add two encrypt and decrypt methods to handle encryption and decryption in our service class:

Step 4:
//Private Key

key = "encrypt!135790";
Enter fullscreen mode Exit fullscreen mode
//To encrypt input data
public encrypt(password: string): string {
    return CryptoJS.AES.encrypt(password, this.key).toString();
}

//To decrypt input data
public decrypt(passwordToDecrypt: string) {
    return CryptoJS.AES.decrypt(passwordToDecrypt, this.key).toString(CryptoJS.enc.Utf8);
}
Enter fullscreen mode Exit fullscreen mode

Angular Encrypting Decrypting Data with CryptoJs | Angular 17 Tutorial | npm install crypto-js

https://youtu.be/0VR6E8UPZZs

Download source code from GitHub: github.com/anilsingh581/CryptoJS

Top comments (5)

Collapse
 
jangelodev profile image
João Angelo •

Thanks for sharing !

Collapse
 
anilsingh profile image
Anil Singh •

Thank you for your appreciation.

Collapse
 
anilsingh profile image
Anil Singh •

Download source code from GitHub: github.com/anilsingh581/CryptoJS

Collapse
 
fitoh46958 profile image
John Doe •

Wow, such an inspirational article. Could you please write the next one about how to install npm packages?

Collapse
 
anilsingh profile image
Anil Singh •

Sure, I will do that and share it with you a link.. Thank you