4

This plunker should make it very clear what the scenario and issue is...

https://plnkr.co/edit/OJEoafoPZpz8gaxEbTBb?p=preview

The app.ts parent component has an array of objects s2data which is passed to the Data Input() of the dropdown.component.ts child component.

<app-dropdown [Data]="s2data"></app-dropdown>

When the app component button is clicked, an new object is pushed to the s2data array.

onClick() {
  this.s2data.push({
    id: '6',
    text: 'six'
  });
}

The JSON strings correctly show that the s2data array has been updated.

However, even though the dropdown component Input() has changed, the ngOnChanges event does not seem to be getting triggered, which is reflected by the unchanged count of ngOnChangeEventCount.

So my question is... why is ngOnChanges not happening in the child component, even though the input has clearly been changed.

4
  • i read through that entire tutorial, but I still don't understand why my code only works when I initialise the variable within the .subscribe function... could you please help with a more complete explanation. Thanks. Commented Jul 16, 2017 at 22:32
  • 1
    @chumtoadafuq Could you create a plunker showcasing this issue? :) Commented Jul 17, 2017 at 9:48
  • @AJT_82 i've simplified the problem in the main description above and provided a plunker to clearly illustrate what i'm struggling to understand! any help appreciated! thx Commented Jul 17, 2017 at 17:22
  • 1
    The answer is pretty clear. Here's a hack as well stackoverflow.com/a/35194254/7741865 which seems to work... Not too pretty, so better go perhaps with assigning a new array in my opinion :) But just to throw it out there as an additional option. plnkr.co/edit/GGQGLWGwRKfzv5dlIzXz?p=preview Commented Jul 17, 2017 at 17:37

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.