Pipes are fun — Creating Currency Converter App

You know pipes, right?

In the “You don’t know Angular Series”, we have explored various concepts of Angular like Routing Basics, Nested Routing, Projections, and Dynamic Components. In this post, we will explore Angular Pipes by creating a currency converter app.

Every frontend application deals with a logic of consuming the data from an API and filtering it and displaying it in a usable format.

Pipes help us writing this transformation over the data coming from the API or from somewhere else.

Default Pipes

In Angular, there are some default pipes which you can apply on a template to transform the data binding.
For example:

<p>The hero’s birthday is {{ birthday | date:"MM/dd/yy" }} </p>

The default pipe will change the birthday date format to MM/dd/yy.
These kind of default pipes are very simple to implement as they can be directly implemented into the templates. You can find more details about this in the documentation here.

Custom Pipes

Writing your own pipes is fun. It helps us to write the transform logic into a separate file. Let’s create our first custom pipe.

1. Create a file with a .pipe.ts extension, say convert.pipe.ts
2. Import Pipe and PipeTransform package from “@angular/core”
3. Use “@Pipe” decorator from “@angular/core”
4. Write your logic inside transform function and return the value.
5. Import pipe in app.module.ts and include it in declarations array.

Here, is our convert.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'convert'
})
export class ConvertPipe implements PipeTransform {
   transform(value: any, args?: any): any {
      return value / 70.64;
   }
}

In app.module.ts, include the pipe in the declarations array:

declarations: [
  AppComponent,
  ConvertPipe
]

Now, we can use this inside the template just like any other default pipe to transform the binded data.

Custom Pipe as templates

Every time the value is bound, it will pass to the pipe named convert which will return the transformed value by dividing it by 70.64.

<div>{{value| convert}}</div>

Custom Pipe as providers

When we have to use pipes inside the component logic, we need to include them as a provider inside the component and then we need to inject it as a dependency inside our constructor.

This means that we will transform the data using the pipes within the component rather than using them inside the template.

import { ConverterPipe } from './converter.pipe';
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ConverterPipe]
})
constructor(private converterpipe: ConverterPipe) {
}

We can then call the pipe transform function anywhere in our file like:

this.converterpipe.transform();

If you are with me so far, we can go ahead and can start implementing the currency converter using the same concepts.

Creating a currency converter App

We want to create an app in which we can enter the amount in any currency and then it can transform that amount into all other currencies present in the world.

Taking a standard Rate Object

We need an Object to know the relation between the different currencies of the world. You can use an API like fixer.io for the same. To simplify this post, we will be using a hardcoded sample taken from fixer.io which provide today’s currency rate.

We have created a class called Rates inside rates.ts file containing the fixer.io sample rate conversion object.

Logic

If a person will provide 5 Euro as an Input, we have to convert all the currencies equivalent to 5 Euros.
The simple Maths states to divide the rate of all the currencies from the rate of the chosen currency to get a base value of 1 unit and then to multiply by the number of units.
For ex: 5 Euros to USD will be:
( Rate of USD / Rate of Euros ) * number of units = ( 1.26735 / 1 ) * 5 = 6.3

Remember, the value can be different today based on the currency rate that varies, to get the accurate answer use any API like fixer.io.

Creating a UI

In UI, we need an input box and a select dropdown which helps the user to select his currency while entering the value.

Currency and Value UI

We can extract the value of the selected option that the user has chosen i.e the rate of the currency ( from rate.ts). In the above example, the selected will be the value of Euros which is 1 from rate.ts file.

Finally, we will apply the formula we discussed above and return the transformed object from the function.

Here, few things to note are:

1. new Rates().rates is the object returned from rate.ts.
2. this.selected is the rate value of the selected dropdown option for currency.
3. In the loop, this.rates object is modified with transformed values by applying the formula described above.
4. Finally, we return the transformed object.

Now, we can call our transform function from the component in which we will include it as a provider.

The convert function is called whenever any dropdown is selected which return the object by transforming it through a pipe. The transformed object is stored as currencyVal which is then looped and appended on the page using *ngFor directive.

Finally, we see all the currencies values updating itself whenever any currency in dropdown get selected.

Currencies in relation with 50 INR

To check out the live version, please see https://converter.angularboy.com/
You can find out the complete code below in the repository.

aayusharora/CurrencyConverter

I hope you have enjoyed this tutorial. If you want me to continue writing these tutorials. Kindly motivate by providing likes — Your 50 claps will make my day!

Please also share on Fb and Twitter. If you’d like to get updates, follow me on Twitter and Medium. If anything is not clear or you want to point out something, please comment down below.