The parent component's parameter changed with Array.push () does not call ngOnChanges on the child component that accepts it as input ()

This plunker should clearly state what the scenario is and the problem ...

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

The parent component app.ts

has an array of objects s2data

that is passed to the Data

Input () of the child component dropdown.component.ts

.

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

      

        
        
        
      

    

When an application component button is clicked, the new array will be moved to the array s2data

.

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

      

        
        
        
      

    

The JSON lines correctly show that the array has been s2data

updated.

However, even though the Input () dropdown has changed, the ngOnChanges event does not seem to fire, which is reflected by the unchanged counter ngOnChangeEventCount

.

So my question is why is ngOnChanges

n't happening in the child component even though the input has clearly changed.