6

Why do the uppercase/lowercase pipes exist in Angular?

Any situation I can think of that they would be used for you could just use the below CSS instead:

text-transform: uppercase|lowercase

Any examples for using this in pipe in production where the text-transform in css wouldn't work or be the best solution?

Tony Scialo
  • 5,457
  • 11
  • 35
  • 52
  • 6
    Sometimes you want to work with data, sometimes you want to work with presentation. – tadman Mar 07 '18 at 19:51
  • 1
    I guess if you want users to be able to copy the text in upper/lowercase, crawlers to see it, perhaps pass it to a child components input, etc. – funkizer Mar 07 '18 at 19:58

1 Answers1

8

This is why:

console.log($("input").val());
input{
 text-transform: lowercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" value="EXAMPLE" />

If you use a pipe to lowercase, then the value will be lowercase.

So if you aren't using an input field or don't intend on extracting the data from an element, then I would say just to use css - at least then you will only have to define this in 1 place (ideally), compared to having to explicitly use a pipe in all fields which is an extensibility nightmare for larger applications.

If you want to see a working angular example of this, check this question: Using Pipes within ngModel on INPUT Elements in Angular2-View
Zze
  • 18,229
  • 13
  • 85
  • 118