Importing generic JS functions into Angular module

Question

Bit of an Angular/Typescript newb here.

I've set up a JavaScript library of exported, helper functions that I know want to import into an Angular components, and use in those components' .html template files.

Here's my Javascript library, template-functions/data-types.ts:

export const isNumeric = val => !Array.isArray(val) && (val - parseFloat(val) + 1) >= 0;

It's a simple arrow function that I'm exporting:

Here's how I'm importing it in my component:

import { Component, OnInit, Input } from '@angular/core';
import { MyModel } from '../model/my-model';
import { isNumeric } from '../template-functions/data-types';

@Component({
  selector: 'my-module',
  templateUrl: './my-module.html'
})

export class MyModule implements OnInit {

  @Input() public mymodeldetails: MyModel;

  constructor() { }

  ngOnInit() { }

  // isNumeric = val => !Array.isArray(val) && (val - parseFloat(val) + 1) >= 0;
}

This is after several hours of having the Angular compiler and VSCode telling me that it couldn't find the data-types module, even though the path was correct. I had a .js file extensions instead of a .ts one!

So now Angular can see my isNumeric function, but I'm the .html template file does not see it with what I've done so far. The browser throws the error "_co.isNumeric is not a function".

What more do I need to do to get my Angular template to see my imported function?

I'm using Angular 6.

Martin Parenteau · Accepted Answer · 2018-10-09 13:19:56Z

5

To make it visible in the template, wrap it in a component method:

import { isNumeric } from '../template-functions/data-types';

export class MyComponent implements OnInit {

  isNumeric(val: any): boolean {
    return isNumeric(val);
  }
}

See this stackblitz for a demo.

As explained in the Angular template syntax documentation:

The expression context is typically the component instance. (...) Template expressions cannot refer to anything in the global namespace (except undefined). They can't refer to window or document. They can't call console.log or Math.max. They are restricted to referencing members of the expression context.

edited Oct 9, 2018 at 13:19

answered Oct 9, 2018 at 2:35

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

2 Comments

Martin Parenteau Over a year ago

Note: in the code snippet above, I use MyComponent as the component class, just to make it clear for future readers that we are referring to a component. Using MyModule as the name of an Angular component class could be confusing.

ChillyPenguin Over a year ago

I'm sure that I had it like this at one point, but I couldn't have done so because it didn't work then. It works now though, so thank you very much. Problem solved.

Sepehr Sepahi · Accepted Answer · 2023-06-28 21:08:05Z

0

For future readers:

To use an imported function in the template, assign it to a property.

import { isNumeric } from '../template-functions/data-types';

export class MyComponent implements OnInit {

    isNumeric = isNumeric;
}

answered Jun 28, 2023 at 21:08

Sepehr Sepahi

12 silver badges1 bronze badge

Collectives™ on Stack Overflow

Importing generic JS functions into Angular module

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related