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!

Answers


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 application
dashboard.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());

You should use something like this to inject dependencies

   myModule.filter('filterName', ['$http', moduleName.myFilter]);

You can create a filter using class with a static function.

export class FilterClass
{
 static id = "FilterId"; //FilterName, use while consume

 /*@ngInject*/
 public static instance() { //static instance function
    let dataFilter  = () => {
        let filteredObject = () => {
            //filter logic
             return filteredData;
        }
        return filteredObject;  
    }
    return dataFilter;
}   
}
//Module configuration 
angular.module(myModule).filter(FilterClass.id, FilterClass.instance());

Consume this filter in the controller using below way.

 let FilterFun:any = this.$filter('FilterId');
 let Filteroutput = FilterFun();

Need Your Help

How to parse JSON Array (Not Json Object) in Android

java android json gson arrays

I have a trouble finding a way how to parse JSONArray.

How do you get the remaining string after a string extracted from a sstream variable?

c++

Like I have a stringstream variable contains "abc gg rrr ff"