How to use exported function in another component in html? ANgular?

Question

I have exported function in separated file

export function sum(population): string {
    return population.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

I am import this function in my component:

import { sum } from  '../../shared/utilities/globalFunction'

And how to use this sum in html ?

When i set

<p> {{ sum(variable-with-data) }}

no work...

Eliseo · Accepted Answer · 2021-01-17 22:40:37Z

1

in html only can use "variables" public in ts, so you need declarea a "variable" (*) and use some like

//in .ts
mysum=sum

//in .html
{{mysum(variable-with-data)}}

Is like another one, you can not use Math in .html but you can use

//in .ts
myMath=Math

//in .html
{{myMat.cos(3.4)}}

(*) I say variable, ,but can be a class, an object a function...

answered Jan 17, 2021 at 22:40

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

4 Comments

Where to mysum=sum ? I am se to OnInit but again no work..

no, it's not necesary in ngOnInit, simply declare as any variable you need

hhmm weird.. i am set it but no work...maybe is error in exported function...

it's a fool example, but.. stackblitz.com/edit/…