Search code examples
angularpiping

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

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?

Solution

  • 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