title: Angular child component doesnt recognize input changes
body: <p>Hello I use parent child communication. At parent I have array which represents graph datas. <a href="https://stackblitz.com/edit/angular-t4b8h3?file=src/app/app.component.html" rel="nofollow noreferrer">Demo</a></p>
  <p>My problem is that when i change one item in array i doesn't fire child component appchanges. In demo I created example which  doesn't work. When I click update I want to update child component graph.</p>
  <p>My child component</p>
  <pre><code>import { Component, OnInit, Input, OnChanges } from &quot;@angular/core&quot;;
  import * as Highcharts from &quot;highcharts&quot;;
  import { ChartService } from &quot;./chart.service&quot;;
  
  @Component({
    selector: &quot;hello&quot;,
    template: `
      &lt;highcharts-chart
        [Highcharts]=&quot;Highcharts&quot;
        [options]=&quot;options&quot;
        [oneToOne]=&quot;true&quot;
        [update]=&quot;updateFromInput&quot;
        style=&quot;width: calc(100% ); height: calc(100% - 17px); display: block;margin-top:15px;overflow: auto !important;&quot;
      &gt;
      &lt;/highcharts-chart&gt;
    `,
    styles: [
      `
        h1 {
          font-family: Lato;
        }
      `
    ]
  })
  export class HelloComponent implements OnInit, OnChanges {
    innerHeight: any;
    innerWidth: any;
  
    @Input() data: any;
  
    Highcharts: typeof Highcharts = Highcharts;
    updateFromInput = false;
    options: any;
  
    constructor(private chart_service: ChartService) {
      this.innerHeight = window.screen.height;
      this.innerWidth = window.screen.width;
    }
  
    onResize(event) {
      this.innerWidth = event.target.innerWidth;
      this.update();
    }
  
    ngOnInit() {
      this.update();
    }
  
    ngOnChanges() {
      console.log(this.data);
      console.log(&quot;değişti&quot;);
      this.update();
    }
  
    update() {
      var series = this.chart_service.groupBy(
        this.data.LINE.DATA,
        &quot;GRUP&quot;,
        &quot;line&quot;
      );
      var categories = this.chart_service.ArrNoDupe(
        this.data.LINE.DATA.map(x =&gt; x.NAME)
      );
      let isLegend = series.length &gt; 1 ? true : false;
      var size = this.innerWidth / (12 / this.data.SIZE) - 30;
      if (this.innerWidth &lt;= 992) {
        size = this.innerWidth - 30;
      }
      this.options = {
        title: { enabled: false, text: &quot;&quot; },
        credits: { enabled: false },
        legend: { enabled: true },
        tooltip: { hideDelay: 0, outside: true, shared: true },
        plotOptions: {
          line: { dataLabels: { enabled: !isLegend }, enableMouseTracking: true }
        },
        yAxis: { title: { enabled: false } },
        xAxis: { categories: categories },
        series: series
      };
    }
  }
  </code></pre>