Angular — Transform Data with Pipes
Introduction
We use pipe for transforming bound properties before displaying them in a view.
Angular provides us with few built-in pipes e.g. date, number, decimal, percent, currency, json etc.
This time, we want to build our own custom pipe.
Use Case
Build a custom pipe which replaces ‘-’ character with a space ‘ ‘.
It could be a product-code e.g. “prod-1, prod-2” or similar data where we want to perform transformation before displaying it.
Solution
We could build a custom pipe to replace dashes with spaces.
But let’s build a more generalized custom pipe, that transforms any specified character in a string to a space.
Pipe Structure
Following is the Skelton for our custom pipe . It has a Pipe decorator with a name property. Inside the pipe there is a transform function.
We write code in this transform method to transform a value and return it.
