angular - Call static function from angular2 template

Question

I'm trying to build 'utility' services (classes) for an angular project. The utility classes have static functions (so we don't have to instantiate needless objects). One example is this:

import { Injectable } from '@angular/core';

@Injectable()
export class DateService {
   constructor() {
   }

   public static parseDate(dateString: string): Date {
       if (dateString) {
           return new Date(dateString);
       } else {
           return null;
       }
   }
}

In my component class file, I then import it like so:

import { DateService } from '../utilities/date.service';

and within the class code like this works:

ngOnInit():void {
  let temp = DateService.parseDate("2012/07/30");
  console.log(temp);  // Mon Jul 30 2012 00:00:00 GMT-0500 (Central Daylight Time)
 }

However, I would like to be able to use these utility functions within the angular html template, like so:

<label for="date">Date</label>
          <input type="date" class="form-control" id="date" required
            [value]="event.date | date: 'yyyy-MM-dd'" (input)="event.date=DateService.parseDate($event.target.value)" name="date">

Unfortunately, that does not work; giving a "Cannot read property 'parseDate' of undefined" error.

Now, I can move the 'parseDate' function to the component class, and that works fine (with the required change in the template, of course)... however, if I have a bunch of components, they'd all need to have their own 'parseDate' function and I think we all know that's a bad idea that doesn't scale well. (please ignore the trivial nature of the parseDate function)

Further, even though I don't really want to instantiate an object just to run a static function, I try it with actual dependency injection. Adding it to the providers array, and building a instance in the constructor - like so:

constructor(private _dateService: DateService) { }

and then changing my template to:

label for="date">Date</label>
          <input type="date" class="form-control" id="date" required
            [value]="event.date | date: 'yyyy-MM-dd'" (input)="event.date=_dateService.parseDate($event.target.value)" name="date">

This also fails, this time with a with a "self.context._dateService.parseDate is not a function" error. Removing the 'static' from the function fixes the problem and I could move on, but I'm still left needing to instantiate something just to run what should be just a static function. Surely there is a better way.

Thoughts?

Answer 1

Only instance members of the components class can be called from the view.

If you want to call static members, you need to provide a getter in the component.

export class MyComponent {
  parseDate = DateService.parseDate;
}

then you can use it like

(input)="event.date=parseDate($event.target.value)"