title: How to clone object and represent it in component?
body: <p>I have an object:</p>
  <pre><code>let root = { id: 1, &quot;children&quot;: [
     { id: 2, children: [{}, {}, {}]}
  ]};
  </code></pre>
  <p>I go through every children block in loop:</p>
  <pre><code>&lt;div *ngFor=&quot;let child of root.children&quot;&gt;
     &lt;app-block [child]=&quot;child&quot;&gt;&lt;/app-block&gt;
  &lt;/div&gt;
  </code></pre>
  <p>So in <code>child</code> variable I have:</p>
  <pre><code>[
     { id: 2, children: [{}, {}, {}]}
  ]
  </code></pre>
  <p>This data is passed to component <code>app-block</code> and represented here.</p>
  <p>Issue is how to clone a component with this <code>child</code> and modify initial object as:</p>
  <pre><code>let root = { id: 1, &quot;children&quot;: [
         { id: 2, children: [{}, {}, {}]},
         { id: 2, children: [{}, {}, {}]} &lt;--cloned
      ]};
  </code></pre>
  <p>Clone without reference to old object?</p>
  <p>I have tried to use <code>&lt;app-wrapper-component [child]=&quot;child&quot;&gt;</code> that has:</p>
  <pre><code>public childRows: any[] = [];
  add() { this.childRows.push(...); }
  remove() {}
  </code></pre>
  <p>Template <code>app-wrapper-component</code> is:</p>
  <pre><code>&lt;div *ngFor=&quot;let child of childRows&quot;&gt;
      &lt;app-block [child]=&quot;child&quot;&gt;&lt;/app-block&gt;
  &lt;/div&gt;
  </code></pre>
  <p>But this way does not change initial object and don't insert a cloned object to <code>root</code> structure.</p>
  <p>So, I have reference to <code>{ id: 2, children: [{}, {}, {}]}</code> how to find <code>children[]</code> element to push here?</p>