Angular 11, how to data-bind a value from a function

Question

I got a list of values that has to be shown, i'm using two elements for databing, here's my component:

export class HomeComponent implements OnInit {
  element!: HomeData;
  element2!: HomeData2;
  /*elements = elements;*/
  constructor(private homeService: HomeService,
              public dialog: MatDialog) {
   }

  ngOnInit(): void {
    this.homeService.getData().subscribe((data: HomeData) => {this.element = data; });
    this.homeService.getData2().subscribe((data2: HomeData2) => {this.element2 = data2; });
  }

and here's my html document

<ul>
  <li>Total number of Sequences: <b>{{element.sequences}}</b></li>
    <li><a href="#"></a>Distinct Prefixes involved in Sequences: <b>{{element.prefixes}}</b></li>
    <li><a href="#"></a>BGP Updates involved in Sequences: <b></b> (Announces: <b>{{element.announces}}</b>, Withdrawals: <b>{{element.withdraws}}</b>)</li>
    <li><a href="#"></a>Total number of BGP Updates collected by RRC00 in 2019: <b>{{element2.updates}}</b> (Announces: <b>{{element2.announces}}</b>, Withdraws: <b>{{element2.withdraws}}</b>)</li>
    <li><a href="#"></a>Percentage of BGP Updates belonging to Sequences: /// (Announces: ///, Withdrawals: ///)</li>
    <li><a href="#"></a>Distinct Collector Peers (CPs) that observed at least a Sequences: <b>{{element.cPs}}</b></li>
    <li><a href="#"></a>Distinct ASes originating the prefixes involved in the Sequences: <b>{{element.aSes}}</b></li>
    <li><a href="#"></a>Number of AB-BA Sequences (whose AS-path contains pattern xAyBz and x'By'Az'): <b>{{element.containingLoops}}</b></li>
    <li><a href="#"></a>Sequences that are originated by an IPv4 Prefix: <b>{{element.prefixv4}}</b></li>
    <li><a href="#"></a>Sequences that are originated by an IPv6 Prefix: <b>{{element.prefixv6}}</b></li>
    <li><a href="#"></a>Sequences whose prefix is announced by more than one AS: <b>{{element.moreThanOneAsOrigin}}</b></li>
    <li><a href="#"></a>Sequences that contain at least one announcement with the BGP Path Attribute Aggregator set: <b>{{element.containsAggregator}}</b></li>
    <li><a href="#"></a>Sequences that contain at least two announcement with different values of the BGP Path Attribute Aggregator: <b>{{element.aggregatorChanges}}</b></li>
    <li><a href="#"></a>Sequences originated by a known beacon prefix: <b>{{element.beaconSequences}}</b></li>
    <li><a href="#"></a>BGP Updates originated by a known beacon prefix: <b>{{element.beaconAnnouncements + element.beaconWithdrawals}}</b> (Announcements: {{element.beaconAnnouncements}}, Withdrawals: {{element.beaconWithdrawals}})</li>
    <li><a href="#"></a>Percentage of BGP Updates originated by a known beacon prefix: /// (Announcements: ///, Withdrawals: ///)</li>
</ul>

Everything works fine but one of the values I have to show is the sum of {{element.announces}} and {{element.withdraws}}, I have tried adding a 'sum' function in my component and then calling it in my html document like this:

<li><a href="#"></a>BGP Updates involved in Sequences: <b>'sum({{element.announces}}, {{element.withdraws}})'</b> (Announces: <b>{{element.announces}}</b>, Withdrawals: <b>{{element.withdraws}}</b>)</li>

The output is exactly the string written there, not the value returned from the function. What is the correct syntax for what I'm trying to do, is a function even necessary?

Answer 1

1. Binding functions to properties and calling them from interpolation would trigger the function for each change detection cycle in case of default change detection strategy. It might have a performance impact if the function has high overhead.
2. The statements inside the interpolation operator are valid TS expressions. As such you could do a simple summation using + inside the interplation. You could also prefix the variables with a + to cast them to number.

Try the following

<li>
  <a href="#"></a>
  BGP Updates involved in Sequences: <b>{{ +element.announces + +element.withdraws }}</b> 
  (Announces: <b>{{ element.announces }}</b>, Withdrawals: <b>{{ element.withdraws }}</b>)
</li>

Answer 2

You need to put your method call inside the {{ }} .

Eg

{{ sum(element.announces, element.withdraws) }} 

Answer 3

Try to bind the sum method this way {{sum(element.announces,element.withdraws)}}