title: @Input ngOnChanges generates a new nested array with my passed in array - how can I avoid this?
body: <p>I'm pretty new to Angular and I'm not quite sure if I'm just doing something wrong with <code>@Input()</code> and <code>ngOnChanges()</code> in my code or if my whole setup isn't correct.</p>
  
  <p>My setup is as follows:</p>
  
  <p>I have some API generated data. My service gets the data and holds logic to do some filtering.</p>
  
  <p>My parent component holds a <code>filtercomponent</code> which has a button "apply filter" (which uses the logic in my service) and a <code>tablecomponent</code> to display the data. </p>
  
  <p>The filtering works fine and I do get the desired filtered data but how do I pass JUST this array to the <code>tableviewcomponent</code>? If I do it via <code>@Input()</code> and run <code>ngOnChanges</code> I get a nested array.</p>
  
  <p>How do I solve this?</p>
  
  <p><strong>Parent TS:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>tabellenDaten: any[];
  
  constructor(private filterservice: BdService) {}
  
  ngOnInit() {}
  
  onDisplayTable(filter: BdFilter) {
    this.filterservice.getBdTabelle(filter).subscribe(
      (daten) =&gt; {
        console.log('tabellendatenneu', daten);
        this.tabellenDaten = daten;
      },
      (error) =&gt; console.log('error: ', error),
      () =&gt; { }
    );
  }
  </code></pre>
  
  <p><strong>Parent HTML which holds a <code>filtercomponent</code> and a <code>tablecomponent</code>:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="v-flex-container-filter"&gt;
    &lt;app-allfilter-bd
      (emitFilter)="onDisplayTable($event)"&gt;&lt;/app-allfilter-bd&gt;
  &lt;/div&gt;
  
  &lt;div class="v-flex-container"&gt;
    &lt;app-tabelle
      [tabellenDaten]="tabellenDaten"&gt;&lt;/app-tabelle&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I log it I do get the desired table like: <code>Array(148)[{...}, {...}, {...}, ...]</code>.</p>
  
  <p>Now, when using <code>[tabellenDaten]="tabellenDaten"</code> and using <code>@Input()</code>...</p>
  
  <p><strong>Child TS (table logic):</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>@Input() tabellenDaten: any[];
  
  ngOnChanges(...tabellenDaten: any) {
    this.dataSource = new MatTableDataSource&lt;any&gt;(tabellenDaten);
    console.log('TABELLENDATEN', tabellenDaten);
  }
  </code></pre>
  
  <p>...I do get the results of the <code>ngOnChanges</code> method (<code>currentValue</code>, <code>firstChange</code> and <code>previousValue</code>) which ALSO holds my data array but how do I get JUST the single array?</p>
  
  <p>Any help is very much appreciated.</p>