Angular: Encrypt | Decrypt

Using CryptoJS, tell me “I♥U”

Photo by Markus Spiske on Unsplash

Tell me {{ 'U2F...3yeKpfg=' | decrypted }} // I♥U

Steps:

1. Create encrypted /decrypted pipes
2. Declare the pipes in your module
3. Use it

1. Create encrypted /decrypted pipes

2. Declare the pipes in your module

import { EncryptPipe, DecryptPipe} from './encrypt-decrypt.pipe';
@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, EncryptPipe, DecryptPipe ],
  providers:    [ EncryptPipe, DecryptPipe ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

3. Use it

In html

<div>Encrypted : {{ secret | encrypted }}</div>

In component

constructor(encryptPipe: EncryptPipe) {
  console.log('encrypted', encryptPipe.transform(this.secret))
}