Angular: Directives vs Pipes

Question

What are the arguments for creating and using directives vs creating and using pipes.

The scenario this question stems from is around currency input and output.

If a user needs to input a currency, why not create/use a directive that parses the input into a formatted currency string? The other option is to take in that string, and display it through a pipe like so:

<input type="text" #val (keydown)="currencyVal=val.value" /> <h3>{{currencyVal | currency}}</h3> 

vs

// Where mask-money is a directive that filters the  //input to a formatted currency string <input type ="text" mask-money (keydown)="currencyVal=val.value" /> <h3>{{currencyVal}}</h3> 

On the other hand, a pipe can be used in the controller/component triggered by an input to filter the value.

I could ask a ton of questions about it, but I basically want to know: what are the arguments for each?

Answer 1

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