TLDR: Here in the bunker, we have a problem, not just one but a few. The issue I’m going to discuss is data formatting, pipes oh and code re-use.

One thing I really –dislike– is formatting values in HTML templates with pipes!

Angular has some template helpers called pipes, used to transform data. But don’t use them, you are wasting your time. They will tie you into the Angular framework, and here is the bottom line,

“Why not just format your data and give it to the template”

Why have the template do all that work?

Going down the pipes route also throws out the TDD approach, why? Well your are going to have fun testing you template to see if the pipes actually worked.

It’s far simpler to format the data before the view engine starts doing it’s thing. Not only that but you get code reuse. Your formatters are just plain old javascript functions. These formatting function can be use in any web-framework you want, without modification. This is not true if you start writing pipes, which are coupled to the angular framework

Show me the code

We have data which comes in from API calls, we need to display that data on the screen, but, what we show on the screen does not match the data that we receive. Got it so far.

The best and simplest solution is to mapp the input ( api data ) to a display model.

I’ve seen some really bad ways to solve this issue, I’ve seen the data mapping code scattered all over the place. With a bit here a bit there and a bit somewhere else.

Not the right solution

• Using pipes, to format data ( hard to test, and tightly coupled to angular, does not work with TDD )

• Mapping data in the component ( non re-usable code ahead)