To bring it to the point in the most simple terms, i would say a pipe is to manipulate data, while a directive is more for DOM manipulation.
A pipe gets data as an input, transforms it and outputs this data in another way.
A directive gets a DOM element it’s “attached” to and enhances it with some kind of features.
Of course you will find examples where both make sense (take the Components into account and you have three structure types to decide between) and it’s more of a question of preference which you choose.
In your example you would use a pipe. Let’s say you want to show the currency value in bold text and use an image-icon as a currency symbol you probably take a directive