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'}}
| 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>
</body>
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>
</div>