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.

Can you throw together a quick plunkr? I ran your code with no issues. — MichaelSolati
– MichaelSolati, Commented Jun 20, 2017 at 2:35

Aravind · Accepted Answer · 2017-06-20 03:03:02Z

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

edited Jun 20, 2017 at 3:03

answered Jun 20, 2017 at 2:31

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

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

3 Comments

Charles Harris Over a year ago

Get an InvalidPipeArgument: '1020' for pipe 'CurrencyPipe'. Even tried taking the $ out from in front of the brackets and that didn't work

Aravind Over a year ago

what version you are using

Max Koretskyi Over a year ago

If you are using $ angular tries to parse it as a template expression - what do you mean by template expression with regards to $? Can point to specific documentation place where $ is explained in regards to the template expression?

Collectives™ on Stack Overflow

Angular: Interpolation Arithmetic Doesn't Work for component properties

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related