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.

I’m surprised the initial value renders. Try this: <p>{{ myarray | json }}</p> — MikeOne
– MikeOne, Commented Feb 9, 2021 at 18:20

Julius Dzidzevičius · Accepted Answer · 2021-02-09 18:44:50Z

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

edited Feb 9, 2021 at 18:44

answered Feb 9, 2021 at 18:35

Julius Dzidzevičius

11k11 gold badges41 silver badges84 bronze badges

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

Collectives™ on Stack Overflow

Angular template array interpolation

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