title: binding the same datasets to multiple child-components via @input is not working
body: <p>I created a Angular component "linechart" (<code>selector: &lt;app-linechart&gt;</code>) that contains a D3 chart. The data for this chart is passed from the parent component via one-way databinding.</p>
  
  <pre><code>&lt;app-linechart [data]="LC1_Data"&gt;&lt;/app-linechart&gt;
  </code></pre>
  
  <p>Within the linechart the data gets parsed etc. but I thought this would not affect the original data from the parent component.</p>
  
  <p>But when I try to nest multiple linechart components in the parent, only one chart is drawn. D3 tells me the date property on the second chart is null.</p>
  
  <pre><code>   &lt;app-linechart   [data]="LC1_Data" &gt;&lt;/app-linechart&gt; 
     &lt;app-linechart   [data]="LC1_Data" &gt;&lt;/app-linechart&gt; 
  </code></pre>
  
  <p>The strange thing is when I do not pass the data from the parent but use a static array with the data within the linechart component, I can draw both charts without problem. So I think is has to do with the data binding somehow.</p>
  
  <p>The chart within the linechart component gets drawn via a createChart() function in the ngOnChanges() lifecycle hook.</p>
  
  <p>What could cause this issue? I really have no idea how to solve this issue...</p>
  
  <p><strong>Update:</strong> 
  AJT_82's hint was exactly the problem. As I'm just dealing with json data, I could simply clone the array via:</p>
  
  <pre><code> var clonedArray = JSON.parse(JSON.stringify(nodesArray))
  </code></pre>
  
  <p>as suggested here: <a href="https://stackoverflow.com/questions/597588/how-do-you-clone-an-array-of-objects-in-javascript">How do you clone an Array of Objects in Javascript?</a></p>
  
  <p>If there is a simple more efficient way, please let me know :-)</p>