Create A Custom Angular Pipe

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

Image for post
Image for post
Photo by Nick Cooper on Unsplash

Create starter application

$ ng new ng-pipes
Image for post
Image for post

Update the template code

<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>

Create the pipe

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

The pipe in action

Image for post
Image for post

Conclusion

Written by

I develop software by profession. My interests include: history, economics, politics & enterprise-architecture. I am a child of God.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store