Angular pipes help you to format your data for good user experience

Mwiza Kumwenda

Feb 29, 2020·3 min read

In this guide I will show you how to create a custom Angular pipe. In order to achieve this, we will create a pipe for converting a value from one currency to another. Specifically, from US dollar ($) to Malawi Kwacha (MWK)

Formatting data is key to having a good user experience. For example, if you are based in the US, users of your website will expect the currency to be in US dollar ($). This is where Angular pipes come in.

Pipes in Angular allow you to transform or format data according to your needs.

Let’s jump into the code and create our pipe.

Create starter application

To create an angular app, run the command below in your project’s directory.

$ ng new ng-pipes

Your application directory structure will be similar to the one below.

Update the template code

In the app.component.html template we will create a label and an input field for the US dollar or the currency we are converting from. Then, create another label and placeholder for the currency we are converting to, i.e. MWK, in this case.

Remove all the code from the app.component.html file and replace with the boilerplate below.

<h3> Currency converting pipe </h3>
<p>
  <label for="usd">USD</label> &nbsp;&nbsp;
  <input [(ngModel)]="usdValue"  name="usdValue" type="number"   id="usd"/>
</p><p>
  <label for="mwk">MWK</label> &nbsp;
  <span> {{usdValue | usdToMwk}} </span>
</p>

The line <span> {{usdValue | usdToMwk}} </span> says: get the US dollar value you input and format it using the usdMwk pipe.

Create the pipe

Create a pipe file as in the figure below named usd-to-mwk.pipe.ts .

The pipe class implements PipeTransform and has a transform function.

A pipes’ transform function takes in a value, formats it and returns the formatted value.

In this specific case, the transform function takes in a US dollar value, transforms it and returns a Malawi Kwacha value.

import {Pipe, PipeTransform} from ‘@angular/core’;@Pipe({name:'usdToMwk'})export class UsdToMwk implements PipeTransform {
    transform(usdValue: number): number {
        let oneUsdInMwk = 720;
        return usdValue * oneUsdInMwk;
    }
}

The line @Pipe({name:’usdToMwk’}) specifies the name of the pipe as it will be referred to in the template code.

Register your pipe in the declarations array of your AppModule file.

Also remember to import FormsModule into the AppModule file because it is required for two-way data binding.

Your app.module.ts file should now look like the one below.

The pipe in action

To serve the application, run the following command in the applications root directory.

$ ng serve -o

The -o flag tells the application to be served automatically in your default browser. Usually on this URL: http://localhost:4200/

When you input a value, it will be converted to the equivalent Malawi Kwacha value on the fly.

Here is the currency converting pipe in action

Conclusion

Angular pipes provide a great option for formatting or transforming data in our templates for better user experience.