AngularJS Filters

Updated on     Kisan Patel

Filters help to filter or format the data to be displayed to the users.

Here, is how you can apply filter to an expression:

{{countryName | uppercase}}

Angular uses the | (pipe) character to combine filters with variables in expressions. When evaluating the expression, the countryName variable is passed to the uppercase filter.

Filters can also take arguments. For example, the date filter:

{{createdDate | date : 'yyyy-MM-dd'}}

Angular’s Built-in Filters:

Filters Description
currency Formats a number as currency
number Formats an expression as a number
date Formats a date object into string
json Formats and shows an object as JSON string
lowercase Format a string to lower case
filter Select a subset of items from an array
orderBy Orders an array by an expression
uppercase Format a string to upper case
 <body ng-app>
     <input ng-model="name" type="text" placeholder="Your name">
     <h1>Hello {{ name | uppercase }}</h1>

The currency filter is used to format a number based on a currency.

<div ng-app="">
 <p>Quantity: <input type="number" ng-model="quantity"></p>
 <p>Price: <input type="number" ng-model="price"></p>
 <h1>Total = {{ (quantity * price) | currency }}</h1>


Leave a Reply