CODEWITHSUNDEEP
arraysangulardata-bindinginterpolation
seenmycorpseanywhere
seenmycorpseanywhere

Reputation: 748

Angular template array interpolation

I'm trying to render an array of strings in a template with double curly braces.

Additionally I have a button that, when clicked, adds another string to the array.

Why is {{ myarray }} never updated after clicking the button, but {{ myarray.length }} is?

I did a codepen here.

Upvotes: 1

Views: 688

Answers (1)

Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

What you can do here is to use Object's prototype function toString() (even though MikeOne comment is great catch, usually json() is useful for debugging. And it will print you array with brackets).

toString() and valueOf() are two methods on Object's prototype, used to convert values to primitive types (and {{ }} does exactly this - tries to convert your array into a primitive value. So it did render initial values, because toString() was called):

{{ myarray.toString() }}

And it prints array length change, because thats a primitive value.

Can read more about toString() and valueOf() here

Upvotes: 1

Related Questions