title: Nested loops in angular 2
body: <p>I want to display the data of this array:
  </p>
  
  <pre><code>array = [
  {nom: nom1, composants: [composant11, composant12]}, 
  {nom: nom2, composants: [composant21, composant22]}
  ]
  </code></pre>
  
  <p>I want to display it this way in a table:</p>
  
  <p><strong>composant</strong>      <strong>nom</strong></p>
  
  <p>composant11   nom1</p>
  
  <p>composant12   nom1</p>
  
  <p>composant21   nom2</p>
  
  <p>composant22   nom2</p>
  
  <p>This is my code: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tr&gt;
  &lt;th&gt;Composant&lt;/th&gt;
  &lt;th&gt;Nom&lt;/th&gt;
  &lt;/tr&gt;
  &lt;template *ngFor="let item of array"&gt;
  &lt;template *ngFor="let composant of item.composants"&gt;
  &lt;tr&gt;
  &lt;td&gt;{{composant.nom}}&lt;/td&gt;
  &lt;td&gt;{{composant.code}}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/template&gt;
  &lt;/template&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My browser is not showing anything. I wonder if really there is a way to do that in the template. Or if I should first transform the array in the component before displaying it.
  Any suggestion will be appreciated!</p>