Formatting data - filters in AngularJS

Arkadiusz Fronc AngularJS 16 January 2016

format Lets be honest, it is not a revolution to format a date in Java Script, but the thing that makes AngularJS special is a way it does that - an elegant way. For purpose of formatting, the AngularJS developers created filters. A value can be passed through a filter and the result can be a formatted value. Actually, filtering can mean many things - whatever takes an input and statelessly produces a result.

See some built-in filters below.

Filters

AngularJS defined an intuitive grammar for using filters. The main role plays a pipe sign (|) to separate stages of data processing in a flow. Generally, it is used like below:

{{originalValue | filterName : parameter1 : parameter2}}

OriginalValue goes to the next stage - the filter which is configured with parameter1 and parameter2 and applied to the value passed in. The result which is the filtered value is returned by the whole {{}} statement.

Obviously, depending on filters, there might be one parameter, many or even none.

Formatting numbers

A number is a number and it does not have any formatting by design. But if it is displayed, it has to become a string and there are more than a single possible format. The first built-in filter - number comes handy here. By default it uses the locale settings configured in the system or in the browser. It is presented in the first example.

The default behavior can also be overwritten by providing a parameter which is a number of wanted decimal places.

A few number filter examples:

<p>{{3456.7843 | number}}</p>      <!-- result = 3,456.784 -->
<p>{{3456.7843 | number:1}}</p>     <!-- result = 3,456.8 -->
<p>{{8/0 | number:1}}</p>       <!-- result = ? -->

The first formula uses the system locale which cuts decimal places to three so the number is rounded. The filter in the second line is parametrized with 1 which means rounding to the first decimal place. The third line shows how the infinity is formatted.

Formatting currencies

Money amount is something more than a number. It is a number with a currency attached. AngularJS has a special filter for handling money.

<p>{{3456.7843 | currency}}</p>     <!-- $3,456.78 -->
<p>{{3456.7843 | currency:"€":0}}</p>       <!-- €3,457 -->

By default the currency filter uses the locale settings to determine rounding and the currency sign. If that behavior should be adjusted, it can be done by two parameters that follow the filter name and a colon.

Formatting dates

Dates leave a lot of room for presentation. A number of possible formats is huge. There are some predefined phrases like medium, short, fullDate, longDate. If none of those is what you need, you can build an exact format you need by using elements like yyyy, MM, dd. More formats are available in the documentation.

<p>{{1459324608000 | date:'fullDate'}}</p>      <!-- Wednesday, March 30, 2016 -->
<p>{{1459324608000 | date:'yyyy-MM-dd HH:mm:ss'}}</p>       <!-- 2016-03-30 09:56:48 -->

Formatting texts

Strings can also be formatted if the original values are not already formed in a desired way. Two popular operations are converting strings to upper case and lower case. It can be done as presented below:

<p>{{'So MiXeD cAsE' | lowercase}}</p>      <!-- so mixed case -->
<p>{{'So MiXeD cAsE' | uppercase}}</p>      <!-- SO MIXED CASE -->

Cascading filters

The pipe (|) sign is not used with filters by accident. Data can be passed through a line of filters like in unix systems.

<p>{{1459324608000 | date:'fullDate' | uppercase}}</p>      <!-- WEDNESDAY, MARCH 30, 2016 -->

The original value (1459324608000) goes to the first filter (date). Then the formatted date, which is a string already, is converted to a string in upper case by the uppercase filter.

Custom filters

If the filters available in Angular are not sufficient, there is nothing to stop you from creating your own filters. That is easy.

More information about filters can be found in the AngularJS documentation - https://docs.angularjs.org/api/ng/filter.