how to call functions in external typescript file from HTML

Question

I'm trying to reach a function that I created in a seperate typescript file but I feel like I'm missing something because it's not working, maybe some routing?

My inputfield: (inside groepdef-edit-component.html)

<input type="number" (blur)="Utils.SetTariefIfEmpty($event)"

I imported the export class Utils

My typescript file: (inside groepdef.edit.component.ts)

import { Utils } from '../Utils/Utils';

My Seperate TS file:

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

@Component({
selector: 'app-utils',
templateUrl: './groeperingdefinitie-contract-edit.component.html',
})

export class Utils {

  public static SetTariefIfEmpty(event: any): void {
  if (event === undefined || event === null) {
    return;
  }

  if (event.target !== undefined && event.target !== null) {
    if (event.target.value.length == 0) {
      event.target.value = 0;
    }
  }
 }
}

You should make the Utils class a Service instead of a Component — Ricky Mo
– Ricky Mo, Commented Dec 30, 2021 at 9:44
@RickyMo I'm trying to set the value of the inputfield using the function, should it return the value or is it capable of changing the field's value instantly? — FllnAngl
– FllnAngl, Commented Dec 30, 2021 at 9:53

Devang Patel · Accepted Answer · 2021-12-30 09:58:27Z

1

To access the function, you will need to create a service and inject that service into your component to use.

service (util.service.ts)

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

@Injectable({
  providedIn: 'root',
})

export class UtilService {

  public setTariefIfEmpty(event: any): void {
     if (event === undefined || event === null) {
       return;
     }
  }

}

Now you need to inject and import this into your component (groepdef.edit.component.ts):

import { UtilService } from '..PATH';
......
constructor(public utilService:UtilService) {}

In your HTML (groepdef-edit-component.html):

<input type="number" (blur)="utilService.setTariefIfEmpty($event)"/>

answered Dec 30, 2021 at 9:58

Devang Patel

1,8638 silver badges23 bronze badges

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

2 Comments

FllnAngl Over a year ago

looks promising, I was set on this path thanks to @RickyMo but your visual presentation's very helpful.

FllnAngl Over a year ago

curious question, can I edit the field inside the service? right now I'm sending an event which contains a target etc, can i edit the value of the target and does that change get returned to the actual field? EDIT : nevermind, Yes it works

Siddhant · Accepted Answer · 2021-12-30 10:19:00Z

1

In your case Utils should not be defined as an Angular Component
You can create Utils.ts file and export functions from it directly. This can be handy when your functions don't rely on any other Angular features(eg. any Angular service)

    export someFunction(someArg: any): any {
       ...
    }

You can create an Angular service UtilityService when your function has some other dependencies or in case when you want to perform component communication or maybe HTTP calls

    @Injectable({
        providedIn: 'root',
      })
      export class UtilService { ... }

In your case 2nd point i.e exporting functions should work. If you follow that approach, then you can utilize the function in your component ts file as:

    import { someFunction } from '<path_to_Utils.ts>';
     @Component({...})
     export class YourComponent {
       onBlur(event: Event) {
          someFunction(event);
       }
     }

HTML file:

   <input type="number" (blur)="onBlur($event)" />

answered Dec 30, 2021 at 10:19

Siddhant

3,2112 gold badges10 silver badges15 bronze badges

1 Comment

FllnAngl Over a year ago

thank you for your contribution, unfortunately I already accepted an answer though. still +1 cause it should work

Collectives™ on Stack Overflow

how to call functions in external typescript file from HTML

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related