19 Jun

Creating Custom Filters With AngularJS

AngularJS filters are used when you want to manipulate data before it is displayed to a user; this could in arrays, strings, numbers, and more. In this example we’re going over how to create and implement a basic date format filter. This filter will allow you to pass in a date object and a date separator so that you can customize the appearance of the date string.

More specifically, in this filter we simply want to be able to pass in an optional date separator that will allow us to customize the final date string. For example: if the object you are manipulating has a date object or date string in it but is formatted in a manner that isn’t appealing to the user, i.e. ISO String “2011-10-05T14:48:00.000Z” or standard javascript date “Fri Jun 16 2017 10:31:17 GMT-0700 (PDT)”, you may want to manipulate it to look something like “03/03/2017” or “03-03-2017”.

To create a filter, we append .filter(“FilterName”, function(){}) to our app. Angular filters are very similar to Factories and Services only once it is attached to the app, it is available in the global scope.

That said, in order to create the date filter we want to attach to our app, we start with the following bit of code:

angular.module('app', [])
.filter(“dateFilter”, function() {
    
})

It is important to keep in mind when using filters that you must return a function that returns the final value. The first parameter in this function is always the data that is being passed into the filter. In our case, this will be a date object that we will name “date”. Note that you can pass in as many parameters as you need in the return function, so for our string we also want to be able choose any separator for our date string, and that means we will have an additional parameter named “separator”.

angular.module('app', [])
.filter(“dateFilter”, function() {
    return function(date, separator) {
        
    }
})

To help in formatting the date, we are going to utilize AngularJS’s built in date filter “$filter(‘date’)”. This filter takes in a date as the first argument and the format as the second:

angular.module('app', [])
.filter(“dateFilter”, function() {
    var dateFilter = $filter('date');
    return function(date, separator) {
        return angularDateFilter(theDate, DATE_FORMAT);
    }
})

angular.module('app', [])
.filter(“dateFilter”, function() {
    var dateFilter = $filter('date');
    return function(date, separator) {
        var separator = separator;
        if(!separator) {	
	separator = “/”;
        }
        return angularDateFilter(theDate, DATE_FORMAT);
    }
})

Then we insert the final string into the format with Day, Month, and Year values:

angular.module('app', [])
.filter(“dateFilter”, function() {
    var dateFilter = $filter('date');
    return function(date, separator) {
        var separator = separator;
        if(!separator) {	
	separator = “/”;
        }
        return angularDateFilter(theDate, 'MM' + separator + 'dd' + separator + 'yyyy');
    }
})

These values can be moved around to fit whatever format you desire. And now that this filter is done, it will take in a date: 2011-10-05T14:48:00.000Z and manipulate it to look something like 10/05/2011. To use this filter, you can apply it directly to the data binding in the HTML or you can use it in your controller or directive using the built-in $filter service. In the HTML this would be written as:

{{ startDate | dateFilter:”-“}}

As you can see, we do not pass in the date as the first parameter. This is because when using filters, the date (startDate) is always taken as the first argument. To use it in a controller or directive, we would call it like so: $filter(“dateFilter”)(startDate, “+”);.

And there you have it. Custom filters are extremely useful little ways to manipulate data, and can help improve the way in which you display data to users to help make applications more user-friendly.

Josh W
No Comments

Post A Comment