How to render a function return to HTML (Angular)

Question

I'm trying to understand how Typescript and HTML are passing data.

(Typescript)

  public getContactByTradingPartnerId(tradingPartnerId: number):string {
    const map = {
        1001 : "[email protected]",
        2 : "[email protected]",
        11 : "[email protected]"
    }
    return map[tradingPartnerId] ?? "A contact has not been found for this trading partner."

(HTML)

<div class="example-element-description">
    {{element.tradingPartnerId}}
</div>

How can I pass the element.tradingpartnerid to the typescript function getContactByTradingPartnerId so that it renders the contact? (Example. the element.tradingPartnerId is 1001 so it renders [email protected] on the UI).

from where is your element comes?

tmsbrndz
– tmsbrndz

2021-06-15 14:33:13 +00:00
Commented Jun 15, 2021 at 14:33 — tmsbrndz
– tmsbrndz, Commented Jun 15, 2021 at 14:33

Vishnu Vinod · Accepted Answer · 2021-06-15 14:29:53Z

3

You can set inner HTML values of element in angular like: [innerHtml]="value"

So you can try:

<div class="example-element-description" 
    [innerHtml]="getContactByTradingPartnerId(element.tradingPartnerId)">
</div>

answered Jun 15, 2021 at 14:29

Vishnu Vinod

7855 silver badges17 bronze badges

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

1 Comment

Rutwick Gangurde Over a year ago

This is the right answer.

scaladdin · Accepted Answer · 2021-06-15 14:29:02Z

0

You can just call the typescript method within the {{}} (assuming the html view is linked to an angular component containing your function).

<div class="example-element-description">
    {{getContactByTradingPartnerId(element.tradingPartnerId)}}
</div>

Usually you'll want to avoid calling functions in the templating accolades.

answered Jun 15, 2021 at 14:29

scaladdin

242 bronze badges

1 Comment

tmsbrndz Over a year ago

medium.com/showpad-engineering/…

Collectives™ on Stack Overflow

How to render a function return to HTML (Angular)

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related