DEV Community

Anil Singh
Anil Singh

Posted on • Edited on

33

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

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

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

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post