Angular - how to use a utility function from a template

user_1028679 0
Viewed 1026

I have a Helper class which defines a static method 'keyDown' which takes the key that was pressed.

I use it in several components, where it was just defined as a method on the component class, called from the template, like this:

     <input type="number"
       ...
       (keydown)="keyDown($event)"
       pattern="^(\d?[0-9]|[1-9]0)$"
       required/>

But duplicating that code is not good, so I put it into a static class, as explained in this question

export abstract class Helper {
  public static keyDown($event: any) {...}
}

Component:

import { Helper } from '../../../utils/helper';

  constructor(
    private helper: Helper,
  ) { }

  get keyDown(v) { return Helper.keyDown(v); }

This does not work because you cannot pass values to getters.

So how can I have a shared utility function that is called from the template of different components?

UPDATE - I tried this.

Credit to @CharlesBarnes for his comment. This almost worked!

I made 3 subtle but important changes:

  1. The class method is no longer static:
    export abstract class Helper {
      public keyDown($event: any) {...}
    }
  1. The injected helper is no longer private, but public. This means the template can now see all methods in the helper class, so it can call them directly:
    import { Helper } from '../../../utils/helper';
    
      constructor(
        public helper: Helper,
      ) { }
  1. Finally I changed the template to prefix the method call with the name of the injected class (lower case 'helper'):
     <input type="number"
       ...
       (keydown)="helper.keyDown($event)"
       pattern="^(\d?[0-9]|[1-9]0)$"
       required/>

But it throws a

NullInjectioNError, no provider for 'Helper'

:(

This kind-of implies to turn the Helper class into a service, and make it injectable.

...but that seems overkill to provide some general-purpose helper utilities.

angular
1 Answers

This is a very good beginning. You are close to the solution.

So far you have only declared an abstract class, which now needs to be implemented by another class which can be instantiated.

@Injectable()
export class MyHelper implements Helper {
  keyDown(e: KeyboardEvent){
    console.log(e)
  }
}

Now the class can be provided. I would do that on a component level:

import { Component } from '@angular/core';
import { Helper } from './helper';
import { MyHelper } from './my-helper';

@Component({
  ...
  providers: [
    { provide: Helper, useClass: MyHelper }
  ]
})
export class AppComponent  {
  constructor(
    public helper: Helper,
  ) { }
}

HTML remains as is.

(keydown)="helper.keyDown($event)"

And I would say this is actually a good pattern, because another component might use a different implementation of the keydown handler. This keeps the code uncoupled while strongly-typed through an abstract class.

user_7766860
Related