NickName:Tom Evans Ask DateTime:2014-08-04T21:13:59

Creating a custom Angular filter with TypeScript

I'm trying to work out the best way of creating a custom Angular Filter with TypeScript.

All the code samples I see use something like:

myModule.filter( "myFilter", function()
{
    return function( input )
    {
        //  filter stuff here
        return result;
    }
}

... which works, but seems messy as I want to keep all my filter code separate. So I want to know how to declare the filter as a separate file (eg filters/reverse-filter.ts) so I can create it like:

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

... the same way you would for Controllers, Services etc.

The documentation for TS and Angular together seems pretty thin on the ground, especially where filters are concerned - can anyone help out?

Cheers!

Copyright Notice：Content Author:「Tom Evans」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/25119557/creating-a-custom-angular-filter-with-typescript

Answers

Douglas 2014-08-04T13:37:23

Functions can be exported from modules like this:\n\nmodule moduleName {\n export function myFilter()\n {\n return function(input)\n {\n // filter stuff here\n return result;\n }\n }\n}\n\n\nthen outside the module:\n\nmyModule.filter(\"filterName\", moduleName.myFilter);\n\n\nThen 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.",

Dazag 2015-10-19T00:27:28

Maybe too late but can be useful for someone else.\n\nmodule dashboard.filters{\n\n export class TrustResource{\n\n static $inject:string[] = ['$sce'];\n\n static filter($sce:ng.ISCEService){\n\n return (value)=> {\n return $sce.trustAsResourceUrl(value)\n };\n }\n }\n} \n dashboard.Bootstrap.angular.filter('trustAsResourceUrl',dashboard.filters.TrustResource.filter);\n\n\nTo explain the last line:\n\ndashboard.Bootstrap.angular.filter('trustAsResourceUrl',dashboard.filters.TrustResource.filter);)\n\n\nI will add a piece of code, wich represents my Bootstrap class, so you can understand it.\n\nmodule dashboard {\n export class Bootstrap {\n\n static angular:ng.IModule;\n\n static start(){ \n Bootstrap.angular = angular.module('EmbApp', dashboard.Bootstrap.$inject);\n }\n\n\n }\n}\n\n//run application\ndashboard.Bootstrap.start();\n\n\nIf you need more information about how it works, you can checkout my own TypeScript/AngularJS/Less structure here",

BrianPMorin 2016-04-21T18:05:45

Here's an example using the injector to get dependencies into your filter. This one gets injected with the $filter service.\n\nexport class CustomDateFilter {\n public static Factory() {\n var factoryFunction = ($filter: ng.IFilterService) => {\n var angularDateFilter = $filter('date');\n return (theDate: string) => {\n return angularDateFilter(theDate, \"yyyy MM dd - hh:mm a\");\n };\n };\n\n factoryFunction.$inject = ['$filter'];\n\n return factoryFunction;\n }\n}\n\n// and in the bootstrap code:\napp.filter('customDate', your.module.CustomDateFilter.Factory());\n",

Michel Ank 2015-09-18T20:02:06

You should use something like this to inject dependencies\n\n myModule.filter('filterName', ['$http', moduleName.myFilter]);\n",