Angular 5 {{}} calculation in html

Question

I'm trying to add margins to my datatable which would be revenue minus cost.

Right now my code looks like this on the html.

<ng-container matColumnDef="margin">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Margin</mat-header-cell>
      <mat-cell *matCellDef="let project">{{project.revenue - project.cost}}</mat-cell>
</ng-container>

The app shows the right number, but I'm not able to sort the column by ascending or descending order. I'm guessing because I'm calculating it in the HTML. How can I work around this?

Are you using PrimeNG data table?

The Hungry Dictator
– The Hungry Dictator

2018-04-19 07:39:40 +00:00
Commented Apr 19, 2018 at 7:39 — The Hungry Dictator
– The Hungry Dictator, Commented Apr 19, 2018 at 7:39

ashfaq.p · Accepted Answer · 2018-04-19 07:39:47Z

5

You can calculate this in your controller.

The approach used by you is not the recommended way because the above calculation will happen with every change detection. But its possible that this value might only change once or on a particular action. So handling this in controller will avoid this and increase performance.

answered Apr 19, 2018 at 7:39

ashfaq.p

5,49723 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Angular 5 {{}} calculation in html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related