Need to do some Base64 encoding and decoding in your Angular app? If so, then hang around here.

I'll show you how to do it.

Additionally, I'll explain why you might want to use Base64 encoding if you're unsure about it.

So let's get started.

What Is Base64 Encoding?

So what, exactly, is Base64 encoding?

It's a means of encoding text in ASCII format.

ASCII, by the way, stands for American Standard Code for Information Interchange. It's the standard used to represent text in computers.

The Base64 encoding scheme takes any kind of data type, such as binary data, and translates it to text format in ASCII.

The "64" part is there because the encoding uses the same 64 characters that are available in countless character sets: A-Z, a-z, 0-9, +, /, and =.

So it's a virtual guarantee that any application, protocol, or communications medium can process a Base64 payload properly.

And That's Why We Use It

We use Base64 encoding to make sure that the data we transmit is easily interpreted by all recipients.

You might be thinking: why can't we just send stuff in binary format? Won't that work everywhere?

No. That won't work everywhere.

Some consuming applications might interpret certain binary characters as control characters. Also, some binary payloads could contain character combinations that receivers interpret with some type of special meaning.

But you won't have that problem when you send stuff with Base64 encoding. 

The biggest (and maybe only) downside to using Base64 encoding is that it increases the size of the payload. A binary chunk of data that gets Base64 encoded will usually turn out about 1.33 times as big as the original.

But that's usually forgiveable.

How to Do It?

Okay. Now that I've covered the preliminaries about Base64, I'll explain how to do it in Angular/TypeScript.

It's as easy as A to B.

That's because the name of the method is literally atob(). But that's for decoding. 

If you want to encode, the method name is bota(). That's pretty easy to remember, isn't it?

let encoded: string = btoa("myPassword!");
console.log(encoded);

That block of code is going to spit out bXlQYXNzd29yZCE= on the console. That's the encoded version of "myPassword!" (without quotes).

Now you can use a service to send that encoded bit across the wire and any consumer should be able to handle it.

Of course: that's a simple example. Any consumer could handle a password like that in clear text as well.

And that brings us to an important point.

Encoding Is NOT Encrypting

The subheader says it all. Don't use encoding for data security.

You might think that the jumbled mess of characters you got when you invoked the atob() method gave you an encrypted password.

But it didn't.

It gave you an encoded password. And anybody can decode it.

So if you want data security as you're sending payloads across the network, use the HTTPS protocol for that purpose.

Don't rely on Base64 for digital security.

Reversing the Process

I already gave away the answer here but if you'd like to decode a Base64 encoded string, use the atob() method.

let encoded: string = atob("bXlQYXNzd29yZCE=");
console.log(encoded);

That's going to give you myPassword1! in the log.

And, keep in mind, you don't need to do any importing for either of those methods. They'll work right out of the box.

Wrapping It Up

Now you know how to do Base64 encoding and decoding in Angular. You also know why it's a good idea to use Base64 encoding on occasion.

Over to you. Take what you've learned here and do something great with it.

Have fun!

Photo by Mikhail Nilov from Pexels