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.

chumtoadafuq
  • 256
  • 5
  • 14
  • 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. – chumtoadafuq Jul 16 '17 at 22:32
  • 1
    @chumtoadafuq Could you create a plunker showcasing this issue? :) – AT82 Jul 17 '17 at 09: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 – chumtoadafuq Jul 17 '17 at 17:22
  • 1
    The answer is pretty clear. Here's a hack as well https://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. https://plnkr.co/edit/GGQGLWGwRKfzv5dlIzXz?p=preview – AT82 Jul 17 '17 at 17:37

0 Answers0