Converting Expression Output with Filters

Problem

When presenting data to the user, you might need to convert the data to a more user-friendly format. In our case we want to uppercase the name value from the previous recipe in the expression.

Solution

Use the uppercase Angular filter.

Enter your name: <input type="text" ng-model="name"></input>
<p>Hello {{name | uppercase }}!</p>

Discussion

Angular uses the | (pipe) character to combine filters with variables in expressions. When evaluating the expression, the name variable is passed to the uppercase filter. This is similar to working with the Unix bash pipe symbol where an input can be transformed by another program. Also try the lowercase filter!

Checkout my new project:

Vue.js Component Patterns Book

The goal of this course is to teach you the fundamentals to make Vue.js components that are simpler, more flexible and most of all fun to build and use!