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?
I would be writing an extensive medium post about angular pipes later this year(2019).
So, let’s get started.
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 :
- Get the Bitcoin to US Dollar price from cryptocompare
- Get the US Dollar to Nigerian Naira exchange rate from fx-rate.
- 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 :
To declare a pipe you will need to:
- 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.
- Implement PipeTransform
- 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 :
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
The fiatConvert pipe would be used in conjuction with the cryptoConvert pipe.
Here is How :
- first we get the btc to usd price using the cryptoConvert pipe
- we pass the returned value from cryptoConvert as the value argument for the fiatConvert pipe.
Implementation ( Modified App.component.html)
Implementation ( Modified App.component.ts)
And Yes we’re done!!!
Here is working sample of the post on stackblitz : ng-crypto-convert
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.