Angular template array interpolation

Question

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 .

Answer 1

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