How to Create a Unit Converter Pipe in Angular
By: Mwiza Kumwenda
Tags: JavaScript, Angular, Software Development, Programming, Web Development

How to Create a Unit Converter Pipe in Angular

Creating a simple custom pipe in Angular

Photo by Markus Spiske on Unsplash

In Angular, pipes are used to transform or format data in a template without writing any boilerplate code in the component. Pipes are extremely handy because you only declare a pipe once and can use it throughout the entire applications’ templates.

In this guide, I will show you the power of Angular pipes by implementing a simple custom unit conversion pipe. Here are some of the advantages of pipes in Angular.

the user gets instant feedback as values are formatted or transformed as you type or in reaction to other changes.

pipes are very lightweight

simple syntax, to call a pipe within a template, you simply use the pipe character followed by the pipe name e.g., {{ name| uppercase }}.

To keep things simple, our pipe will convert values from Kilometers(km) to the equivalent meter(m) value.

Without further ado, let’s jump into the code.

Create a new Angular application

We will start by creating a new Angular application named, unit-conversion, using the following CLI command.

ng new unit-conversion --defaults

Add a new pipe

Once the Application is created, you can now create the unit-conversion pipe. To do so, you can use the following CLI command.

ng g p kilometer-to-meter

The command above creates two files: the pipe class which contains the logic and a unit test file. In addition, the pipe is registered with the default module file.

We are more interested in the class file itself in this guide, but I highly recommend that you write unit tests for your pipes. The project structure now looks as follows.

Implementing the pipe

Typically, a pipe in Angular will implement the PipeTransform interface. The interface contains the transform method, which takes in at least one argument, including the value to format or transform.

The transform method is where you write the logic to format or compute the required value and return it as the formatted value.

In our case, we know that 1 kilometer equals 1000 meters. Therefore, to convert from kilometer to meter, the transform method has to compute the required meter value by multiplying the kilometer input value by 1000. The returned value will be the meter’s equivalent.

The code for the pipe, we created above should now look as below.

Using the pipe within a template

Now that our pipe logic is in place. We can now use the pipe in a template.

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

The code creates an input field for the user to enter the number of kilometers and below it, we display the equivalent value in meters on the fly.

Since we have used the ngModel on the input property. We have to register the FormsModule in the corresponding module, in this case the app.module.ts file.

The code in the app.module.ts file looks as follows.

Note: If you do not import and register the FormsModule you will get the following error message: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’”.

In the app.component.ts file, we create a property for the km value. And initially set it to zero.

Testing the pipe

To serve the application, simply run the following CLI command, in the applications’ root folder.

ng serve -o

In the kilometer input field, you can type in the number of kilometers you wish to convert.

The GIF below shows the conversion pipe in action.

Summary

In this guide, we created a simple pipe to handle unit conversion. Specifically, from kilometer to meter.

Pipes are powerful and lightweight and can be used in templates with ease, giving users instantaneous formatted data.

The Angular framework provides many built-in pipes for formatting data and more default pipes will be added as the framework matures.