How to manipulate an add operation in angular expression?

Question

I have a output records,

  "Records": [{"successcount":3,"tap":"DF"},{"successcount":6,"tap":"MF"}] in this format.

In my html page, I need to add those successcount & display.

My HTML:

   <ng-container *ngFor="let item of element.Records; let i=index">
      {{ item?.successcount }}
      {{ i }}
   </ng-container>

Here Im able to display successcounts separately. But I need to add both of them in html itself and display. Can anybody tell me how to do this?

Answer 1

No need to use *ngFor over the array as you don't need to display anything for each item. You can call a function from HTML and display count like this -

<div>{{totalSuccessCount()}}</div>

totalSuccessCount() {
   element.Records.reduce((a, b) => a.successcount + b.successcount);
}

Best approach would be in this case you calculate count in controller and store the value in some variable and print it.

PS: But calling a function in template is not recommended in angular, as it will be calling on every change detection which may lead to slows down the performance of your application.