Create A Custom Angular Pipe

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

Photo by Nick Cooper on Unsplash

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…