Angular Uppercase/Lowercase Pipe - Why not just use css?

Question

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?

Answer 1

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