Creating a custom Angular filter with TypeScript Creating a custom Angular filter with TypeScript typescript typescript

Creating a custom Angular filter with TypeScript


Functions can be exported from modules like this:

module moduleName {    export function myFilter()    {        return function(input)        {            //  filter stuff here            return result;        }    }}

then outside the module:

myModule.filter("filterName", moduleName.myFilter);

Then it would then be possible to do things like automatically register all of the filters defined in the moduleName module by iterating over its public properties.


Maybe too late but can be useful for someone else.

module dashboard.filters{    export class TrustResource{        static $inject:string[] = ['$sce'];        static filter($sce:ng.ISCEService){            return (value)=> {                return $sce.trustAsResourceUrl(value)            };        }    }}         dashboard.Bootstrap.angular.filter('trustAsResourceUrl',dashboard.filters.TrustResource.filter);

To explain the last line:

dashboard.Bootstrap.angular.filter('trustAsResourceUrl',dashboard.filters.TrustResource.filter);)

I will add a piece of code, wich represents my Bootstrap class, so you can understand it.

module dashboard {    export class Bootstrap {        static angular:ng.IModule;        static start(){                    Bootstrap.angular = angular.module('EmbApp', dashboard.Bootstrap.$inject);        }    }}//run applicationdashboard.Bootstrap.start();

If you need more information about how it works, you can checkout my own TypeScript/AngularJS/Less structure here


Here's an example using the injector to get dependencies into your filter. This one gets injected with the $filter service.

export class CustomDateFilter {    public static Factory() {        var factoryFunction = ($filter: ng.IFilterService) => {            var angularDateFilter = $filter('date');            return (theDate: string) => {                return angularDateFilter(theDate, "yyyy MM dd - hh:mm a");            };        };        factoryFunction.$inject = ['$filter'];        return factoryFunction;    }}// and in the bootstrap code:app.filter('customDate', your.module.CustomDateFilter.Factory());