ECMAScript6 AngularJS Filter

Question

I am using ECMAScript6 in a project and am trying to create an Angular Filter. Below is my attempt, however I am getting the following error in the console: Cannot set property 'PassFilter' of undefined

I am new to both ES6 and Angular. I had to bootstrap angular that way due to legacy limitations.

myAngularModule = angular.module("MyModule");

angular.element(document).ready(function() {
  var myDiv = $("#myAngularDiv");
  angular.bootstrap(myDiv, ["MyModule"]);
});

myAngularModule.filter('PassFilter', APP.filters.PassFilter);



/* Filter is in a separate file: */
class PassFilter {

  constructor(input) {

    var split = input.split('');
    var result = "";
    for (var i = 0; i < split.length; i++) {
      result += "*";
    }
    return result;

  }
}

APP.filters.PassFilter = PassFilter;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div id="myAngularDiv">
  <input type="password" ng-model="password">
  <span>{{password | PassFilter}}</span>
</div>

Answer 1

I am new in Angular. I used class to create filter in Angular.

class PassFilter{
  constructor(input){
    this.input = input;
  }

  myMethod() {
    let input = this.input;

    let split = input.split('');
    let result = "";
    for (let i = 0; i < split.length; i++) {
      result += "*";
    }

    return result;
  }

  static PassFilterFactory(input){
    let filter = new PassFilter(input);
    return filter.myMethod();
  }
}

PassFilter.PassFilterFactory.$inject = ['input'];

angular.module('myAngularModule', [])
  .filter('passFilter', () => PassFilter.PassFilterFactory);

in html

<span>{{password | passFilter}}</span>

Answer 2

Filter function in Angular does not take a class but a filter factory function. This implies if you are using ES6 you can use lambda's (arrow function) to implement the filter.

myAngularModule.filter('PassFilter', ()=> {
   return (input)=> { 
      var split = input.split('');
      var result = "";
      for (var i = 0; i < split.length; i++) {
       result += "*";
      }
      return result;
   }
});

Answer 3

It seems you want to have separate files, so:

// star.filter.js
export default function (input = '') {
  var split = input.split('');
  var result = "";
  for (var i = 0; i < split.length; i++) {
    result += "*";
  }
  return result;
}

// star.module.js
import angular from 'angular';

import starFilter from './star.filter';

let starModule = angular.module('common.star', [])
  .filter('star', () => starFilter )
  .name;

export default starModule ;