title: Angular *ngFor loop through an array of arrays
body: <p>I have an array which contains other arrays inside like that:</p>
  
  <pre><code>array = [
             ["element A", "element B"],
             ["YES", "NO"]
          ]
  </code></pre>
  
  <p>And I want to loop through this array of object in an HTML table using ngFor:</p>
  
  <pre><code>   &lt;table&gt;
       &lt;thead&gt;
         &lt;tr&gt;
           &lt;th&gt;#&lt;/th&gt;
           &lt;th&gt;COLUMN 1&lt;/th&gt;
           &lt;th&gt;COLUMN 2&lt;/th&gt;
         &lt;/tr&gt;
       &lt;/thead&gt;
  
       &lt;tbody&gt;
         &lt;template *ngFor="let row of csvContent; let in = index"&gt;
           &lt;th scope="row"&gt;{{in}}&lt;/th&gt;
              &lt;template *ngFor="let c of row; let in = index"&gt;
                &lt;td&gt;
                 {{c[0]}}
                &lt;/td&gt;
              &lt;/template&gt;
         &lt;/template&gt;
       &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>I want to display each inner array list below COLUMN1 and COLUMN2 respectively:</p>
  
  <pre><code> COLUMN1   | COLUMN2
   --------------------
   element A | YES
   element B | NO
  </code></pre>
  
  <p>I can't figure it out how to use *ngFor properly in order to list an array of arrays (Simple list of strings). At the moment, it's either an empty array or a shifted &amp; messed up Table presentation.</p>
  
  <p>This is how looks the Table:</p>
  
  <p><a href="https://i.stack.imgur.com/82l3d.png" rel="noreferrer"><img src="https://i.stack.imgur.com/82l3d.png" alt="shifted HTML Table using *ngFor"></a></p>
  
  <p>Or this wrong presentation because Element A and B should be below COLUMN 1 and YES, NO should be below COLUMN2:</p>
  
  <p><a href="https://i.stack.imgur.com/hSSaB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hSSaB.png" alt="enter image description here"></a></p>