title: Passing array of objects from angular template to another component using @input
body: <p>I am trying to pass an array of objects through angular template from one component to another one. </p>
  
  <pre><code> &lt;div *ngFor="let item of data"&gt;
      &lt;div class="col-xl-3"&gt;
        &lt;top-users  usersData ={{[item]}}&gt; &lt;/top-users&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>item here supposed to be </p>
  
  <pre><code>[{id:1, name: 'Ahmed'}, {id:2, name:'Mohammed'}]
  </code></pre>
  
  <p>and the data is array of array of objects </p>
  
  <pre><code>[    
   [{id:1, name: 'Ahmed'}, {id:2, name:'Mohammed'}],
   [{id:3, name: 'Ahmed'}, {id:4, name:'Mohammed'}],
   [{id:5, name: 'Ahmed'}, {id:6, name:'Mohammed'}]
  ]
  </code></pre>
  
  <p>When I receive the variable through @input parameter, I get the result typeof string and looks like this</p>
  
  <pre><code>[object Object],[object Object]
  </code></pre>
  
  <p>I tried to parseJson and gives me this error</p>
  
  <pre><code>ERROR SyntaxError: Unexpected token o in JSON at position 1
  </code></pre>
  
  <p>What should I do to get the right array of object?</p>