DEV Community

Anil Singh
Anil Singh

Posted on • Updated 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
 
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

Collapse
 
anilsingh profile image
Anil Singh

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