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

$150K MiniMax AI Agent Challenge — Build Smarter, Remix Bolder, Win Bigger!

Join the MiniMax AI Agent Challenge — Build your first AI Agent 🤖

Developers, innovators, and AI tinkerers, build your AI Agent and win $150,000 in cash. 💰

Read more →

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

Heroku

Tired of jumping between terminals, dashboards, and code?

Check out this demo showcasing how tools like Cursor can connect to Heroku through the MCP, letting you trigger actions like deployments, scaling, or provisioning—all without leaving your editor.

Learn More

👋 Kindness is contagious

Explore this insightful write-up embraced by the inclusive DEV Community. Tech enthusiasts of all skill levels can contribute insights and expand our shared knowledge.

Spreading a simple "thank you" uplifts creators—let them know your thoughts in the discussion below!

At DEV, collaborative learning fuels growth and forges stronger connections. If this piece resonated with you, a brief note of thanks goes a long way.

Okay