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?

You could create a custom pipe to avoid the need of calling the static function in the template — Daniel Higueras
– Daniel Higueras, Commented Jan 25, 2017 at 16:47
If you are going to inject service then why are you using static keyword? what's wrong in dealing with a single instance of the service? — micronyks
– micronyks, Commented Jan 25, 2017 at 17:05

Günter Zöchbauer · Accepted Answer · 2017-04-05 18:08:37Z

117

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)"

edited Apr 5, 2017 at 18:08

answered Jan 25, 2017 at 16:48

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

chrispy Over a year ago

Could you also create a custom decorator to add the static function to the prototype? That would also make it available in the template, but not in the component body.

Günter Zöchbauer Over a year ago

Sorry, I don't know about custom decorators. I'm not using TS myself.

Youp Bernoulli Over a year ago

I don't see a "real" getter in a TypeScript way: public get parseDate(){ return DateService.parseDate;}

Sergey Kandaurov · Accepted Answer · 2017-10-03 09:13:50Z

34

You can declare a field in your component that will make the class accessible for your template.

export class YourComponent {
    public DateService= DateService;
}

answered Oct 3, 2017 at 9:13

Sergey Kandaurov

2,7365 gold badges26 silver badges36 bronze badges

3 Comments

hughjdavey Over a year ago

This is much easier than using a decorator, +1 for simplicity

rinogo Over a year ago

Probably not the "right" way of doing this, but certainly seems like the simplest of all of these options and works just as you'd expect!

Dean Over a year ago

Make sure you put DateService= DateService and not DateService: DateService. Hope this saves you 5 minutes

chrispy · Accepted Answer · 2017-01-25 17:31:16Z

32

Gunter's answer is perfectly valid and is the way I've done it most of the time.

If you are using typescript, you additionally have the option of creating a custom decorator to provide functions to your view so your component remains uncluttered.

Example:

Define a decorator:

import {StaticClassFunctions} from "./static-class-functions"

export function CustomDecorator(): Function {
    return (target: Function): Function => {
        target.prototype.yourStaticMethod = (param1) => {
            return StaticClassFunctions.yourStaticMethod(param1);
        }
    }
}

Apply the decorator to your component:

@Component{ ... }
@CustomDecorator()
export class YourComponent { ... }

Now your have access to those static functions in your view without having to declare them in your Component! Very useful for repetitive "utility" functions to support view formatting and such (like enum casting!)

<span>{{yourStaticMethod(yourInput)}}</span>

You won't have access in your component though unless you declare the function at the top so it can compile.

edited Jan 25, 2017 at 17:31

answered Jan 25, 2017 at 17:11

chrispy

3,6321 gold badge14 silver badges19 bronze badges

6 Comments

TechCrunch Over a year ago

If I have multiple static functions, do I need to write custom decorator for each of the functions ?

chrispy Over a year ago

Nope! You can put as many functions as you want in that decorator. The decorator is returning the function it decorates and takes it as an argument, so you can modify it in any way you want.

TechCrunch Over a year ago

I copy pasted this exact thing. I am getting TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.

TechCrunch Over a year ago

I tried adding a return for target.prototype.yourStaticMethod. But that did not work. It was throwing compile error for parameters.

cjbarth Over a year ago

Works very well, but how to do you get typing support in the decorated function?

|

Martin · Accepted Answer · 2020-12-15 14:10:03Z

11

There is already a pattern for doing this in Angular called pipes. In Angular 1 this was called filters.

In Angular you create your custom pipe class and use the | in the template to pass values to. There is a built in one for dates, it is used like:

{{ "2017-01-24" | parseDate }}

Of course if this pipe does not do what you want, you can create your own:

@Pipe({
  name: 'parseDate'
})
export class ParseDate implements PipeTransform {

  transform(value: string): string {
    return DateService.parseDate(value);
  }
}

For more info please see: https://angular.io/docs/ts/latest/guide/pipes.html

edited Dec 15, 2020 at 14:10

answered Jan 25, 2017 at 17:47

Martin

16.4k4 gold badges51 silver badges58 bronze badges

Comments

atiyar · Accepted Answer · 2020-12-31 18:47:24Z

3

This is how I did it once -

public get DateService(): typeof DateService {
    return DateService;
}

and used it from the template as -

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

It is basically @Sergey's version, but in form of a more "TypeScripty" getter which clarified that I'm returning the type of the class and thus it's static members would be exposed at the template.

answered Dec 31, 2020 at 18:47

atiyar

8,3857 gold badges41 silver badges83 bronze badges

Comments

chriscrossweb · Accepted Answer · 2022-04-12 11:47:55Z

2

This is how I usually did it:

public readonly DateService: typeof DateService = DateService;

and in the template:

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

This way, you don't have to create a getter, but just a public variable that will be accesible in the template.

answered Apr 12, 2022 at 11:47

chriscrossweb

3481 gold badge5 silver badges23 bronze badges

Collectives™ on Stack Overflow

Call static function from angular2 template

6 Answers 6

3 Comments

3 Comments

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

3 Comments

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related