Change detection not registering data changes

Question

I have an html structure with a component inside a component (forgot the proper word for it).

working basicly like this (largely simplified):

main html:

Answer 1

If you use a spread operator instead of push it should work.

this.data = [...this.data, newItem];

The reason for this is that angular detects a change when the whole object changes, or the reference changes, so a mutation isn't going to trigger it. So rather than mutating the array, you need to make it a new array.