Angular: Interpolation Arithmetic Doesn't Work for component properties

Question

Why does this work:

<span>${{10 + 20}}</span>
<!-- <span>$30</span> -->

But this doesn't work:

<span>${{cart.subtotal + cart.taxTotal}}</span>
<!-- <span>$1020</span> -->

It seems that the properties from the component are passed to the template as strings, irregardless that they are typed as numbers on the component itself.

Answer 1

If you are using $ angular tries to parse it as a template expression. How ever you can use the currency pipe to display the currency on your template

<span>{{cart.subtotal + cart.taxTotal | currency:'USD':true}}</span>

LIVE DEMO