Complete guide To Angularjs Filters For Beginners

In this Tutorial you will learn about Filters From scratch means. From Zero To building your own filters so lets get started , As with many frameworks, Angular also has other paradigms to help us build our web app. Filters allow us to easily manipulate and sort data from either the view or controller, and just like with directives, there are a good few filters included out of the box.

There are many use cases for filters, and we’ll take a look at a few of them over the course of the chapter. For example, you may simply want to manipulate a string. This could be by converting, localizing, or even truncating. Of course, filters also allow you to work with other JavaScript types, such as arrays and objects. Perhaps you’d want to create a live search to filter through a dataset you’ve looped using ng-repeat. All of that is possible with filters.

Before we take a look at some of the pre-included filters, we should probably see how a filter is applied from the view.

Applying a filter from the view

Filters can be applied directly to expressions within our templates. Remember, an expression is anything within the double curly-brace syntax or a directive:

{{expression | filter}}

It’s easy to apply a filter; we just add a pipe symbol followed by the name of the filter we want to place on the expression. We can follow the same idea to apply multiple filters to a single expression. Multiple filters are chained and applied in succession. In the following example, filter2 will be applied to the output of filter1 and so forth:

{{expression | filter1 | filter2 | filter3}}

Some filters may have arguments, and these can be applied using a similar syntax:

{{expression | filter:argument1:argument2}}

Throughout the chapter, we’ll demonstrate a number of the filters included with Angular directly from the view using the syntax we’ve just looked at. We’ll then take a look at how we can apply the same filters from the controller and also how we can create our own.

Currency and numbers

The first filter we’re going to look at is one that formats numbers into currency. In the en-US locale, it adds a comma to separate thousands and a decimal point in the right place. It also prepends the relevant symbol:

{{12345 | currency}}

The currency symbol will depend on locale. As we’re using en-US, by default, Angular prepends a dollar symbol ($), but we can pass through the symbol of our choosing as an argument:

{{12345 | currency:'£'}}

It’s important to remember to wrap the symbol in quotation marks, as this is a string.

Angular also includes a second filter to format numbers, which gives us a little more control. It allows us to specify the number of decimal places we wish the number to be rounded to:

{{12345.225 | number:2}}

The output of this filter will be 12,345.23. You’ll notice that the number has been rounded up to two decimal places and a comma has been added to separate thousands.

Lowercase and uppercase

These two filters are perhaps the simplest ones included with Angular. They simply convert the provided string to lowercase or uppercase:

{{'Stephen' | lowercase}}

{{'Declan' | uppercase}}

These filters output the following:

stephen
DECLAN

limitTo

There are times when you need to limit a string or an array, and this can easily be achieved in angularjs using the limitTo filter:

{{'Lorem ipsum dolor sit amet' | limitTo:15}}

You’ll notice that this filter takes a single argument, which is the number to which the input should be limited. Here we’ve limited a string, but this could quite easily be an array in an ng-repeat directive, for example:

<div ng-repeat="array | limitTo:2"></div>

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares