Custom Angular Pipe for Crypto-Currency conversions.

Every application starts out with what seems like a simple task: get data, transform them, and show them to users. Getting data could be as simple as creating a local variable or as complex as streaming data over a WebSocket.

Once data arrives, you could push their raw toString values directly to the view, but that rarely makes for a good user experience. For example, in most use cases, users prefer to see a date in a simple format like April 15, 1988 rather than the raw string format Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time).

So what exactly are Angular Pipes?

Pipes are a useful feature in Angular. They are a simple way to transform values in an Angular template. There are some built in pipes, but you can also build your own pipes.

I would be writing an extensive medium post about angular pipes later this year(2019).

So, let’s get started.

cheerio!!!

We would be using the US Dollars as base currency for conversion to other fiat currencies and we would be converting Bitcoin to the Nigerian Naira.

Here is a breakdown of the conversion steps involved :

  1. Get the Bitcoin to US Dollar price from cryptocompare
  2. Get the US Dollar to Nigerian Naira exchange rate from fx-rate.
  3. Multiply the bitcoin to USD price with the USD to NGN exchange rate

Setting up the Project

Basic knowledge of Angular 2+ is needed to follow along

Generate a new angular app using the angular-cli

Generate a new pipe module then create a new pipe

folder structure :

Declaration

To declare a pipe you will need to:

  1. Add the @Pipe annotation to your class and set the name of the pipe. This name will be the one you will use in the template.
  2. Implement PipeTransform
  3. Implement the transform(value, args) method that comes from PipeTransform. This is the place to add all your fancy data transformations.

The Pipes Module :

Import Pipes Module in App Module :

App Component

Usage : App Component Html

An integer is returned from the CryptoConvert pipe transform which is then multiplied with the usd_to_ngn_rate, the | number pipe is an Angular Built in Pipe for manipulating numbers.

So, Basically are we done 😉 ?

Well this depends on how you decide to make use of the pipe and the state of the data you would be passing to the pipe. If your data is static, that is the conversion rate which in our case is USD to NGN is static and you won’t be needing to change the country currency, then this implementation will work for you.

Do not forget to get the current Bitcoin to USD price using an api service like cryptocompare

Dynamic and Real Time Data

Crypto-Currency prices like bitcoin fluctuate and you might also decide to get the usd exchange rate for multiple currencies.
Working with Dynamic and Real Time Data would require a little tweak to our pipe implementation.

For the sake of brevity and keeping it simple I would be writing a Full Dynamic and Real Time Implementation in another Medium post. But for now, let’s see how we can Get multiple Fiat-Currencies.

Create a new Pipe

We would be creating a new pipe in our pipes folder and call it fiatConvert.pipe.ts also reference it in our pipes module.

The fiatConvert pipe takes as argument a value which would be transformed, a currency and an optional argument Irate which is the rate of the currency.

Do not forget to import and export the fiatConvert Pipe in the pipes module

Usage

The fiatConvert pipe would be used in conjuction with the cryptoConvert pipe.
Here is How :

  1. first we get the btc to usd price using the cryptoConvert pipe
  2. we pass the returned value from cryptoConvert as the value argument for the fiatConvert pipe.

Implementation ( Modified App.component.html)

updated app.component.html

Implementation ( Modified App.component.ts)

updated app.component.ts file

And Yes we’re done!!!

Here is working sample of the post on stackblitz : ng-crypto-convert

Wrapping up

Angular pipes are very helpful and come in handy in situations like this. But of course I wouldn’t say this is the best way to handle a crypto-converting logic, it depends on what works for you. Feel free to modify and improve to suite your needs.

Adios!!!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store