how to call functions in external typescript file from HTML

Issue

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;
    }
  }
 }
}

Solution

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 By - Devang Patel