angular password encryption

Encryption and Decryption Data/Password in Angular 9 plus

You can use crypto.js to encrypt data. We have used 'crypto-js'. Follow the below steps,
Steps 1 – Install CryptoJS using below NPM commands in your project directory

npm install crypto-js --save
npm install @types/crypto-js –save

After installing both above commands it looks like –

NPM Command 1 -> npm install crypto-js --save

NPM Command 2 -> npm install @types/crypto-js --save

Steps 2 - Add the script path in “angular.json” file.

"scripts": [

Steps 3 – Create a service class “EncrDecrService” for encrypts and decrypts get/set methods.
Import “CryptoJS” in the service for using encrypt and decrypt get/set methods.

import { Injectable } from '@angular/core';
import * as CryptoJS from 'crypto-js';

  providedIn: 'root'

export class EncrDecrService {
  constructor() { }
  //The set method is use for encrypt the value.
    var key = CryptoJS.enc.Utf8.parse(keys);
    var iv = CryptoJS.enc.Utf8.parse(keys);
    var encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(value.toString()), key,
        keySize: 128 / 8,
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7

    return encrypted.toString();

  //The get method is use for decrypt the value.
    var key = CryptoJS.enc.Utf8.parse(keys);
    var iv = CryptoJS.enc.Utf8.parse(keys);
    var decrypted = CryptoJS.AES.decrypt(valuekey, {
        keySize: 128 / 8,
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7

    return decrypted.toString(CryptoJS.enc.Utf8);

Steps 4 - Import this service class “EncrDecrService” in the angular module class “NgModule” and then add this service in the providers.

import {EncrDecrServicefrom '../app/EncrDecr/encr-decr.service';

  declarations: [
  imports: [
  providers: [EncrDecrService],
  bootstrap: [AppComponent]
export class AppModule { }

Steps 5 - Finally, use your encrypted and decrypted service methods in your component class.

import { ComponentOnInit } from '@angular/core';
import {EncrDecrServicefrom '../EncrDecr/encr-decr.service';

  selector: 'app_user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
export class UserComponent implements OnInit {

  constructor(private EncrDecrEncrDecrService) {   }

  ngOnInit() {
    var encrypted = this.EncrDecr.set('123456$#@$^@1ERF''password@123456');
    var decrypted = this.EncrDecr.get('123456$#@$^@1ERF'encrypted);
    console.log('Encrypted :' + encrypted);
    console.log('Encrypted :' + decrypted);

Steps 6 - See the output in your application browser's console


Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog -
My Books - Book 1 and Book 2 Powered by Blogger.